Los últimos tutoriales de desarrollo web
 

jQuery animate() Method

<Métodos de efectos jQuery

Ejemplo

"Animación" un elemento, cambiando su altura:

$("button").click(function(){
    $("#box").animate({height: "300px"});
});
Inténtalo tú mismo "

Definición y Uso

El animate() método realiza una animación personalizada de un conjunto de propiedades de CSS.

Este método cambia un elemento de un estado a otro con los estilos CSS. El valor de la propiedad CSS se cambia gradualmente, para crear un efecto animado.

Sólo los valores numéricos pueden ser animados (como "margin:30px" ). Los valores de cadena no pueden ser animados (como "background-color:red" ), a excepción de la cuerdas "show", "hide" y "toggle" . Estos valores permiten ocultar y mostrar el elemento animado.

Consejo: Utilice "+=" "-=" "+=" "-=" Para animaciones relativas.

Sintaxis

(selector).animate({styles},speed,easing,callback)

Parámetro Descripción
styles Necesario. Especifica una o más propiedades / valores CSS para animar.

Nota: Los nombres de propiedad deben ser camella entubado cuando se utiliza con el animate() método: Usted tendrá que escribir paddingLeft en lugar de padding-left, en lugar de marginRight margen derecha, y así sucesivamente.

Las propiedades que se pueden animar:


Sólo los valores numéricos pueden ser animados (como "margin:30px" ). Los valores de cadena no pueden ser animados (como "background-color:red" ), a excepción de la cuerdas "show", "hide" y "toggle" . Estos valores permiten ocultar y mostrar el elemento animado.

Tip: animaciones de color no están incluidos en la biblioteca central de jQuery.Si desea animar el color, es necesario descargar el plug-in de color Animaciones de jQuery.com
speed Opcional. Especifica la velocidad de la animación. El valor por defecto es de 400 milisegundos

Valores posibles:

  • milisegundos (como 100, 1000, 5000, etc)
  • "slow"
  • "fast"
easing Opcional. Especifica la velocidad del elemento en diferentes puntos de la animación. El valor por defecto es "swing" . Valores posibles:
  • "swing" - se mueve más lento al principio / final, pero más rápido en el medio
  • "linear" - se mueve en una velocidad constante
Tip: Más funciones de aceleración están disponibles en los módulos externos.
callback Opcional. Una función que se ejecutará después de la animación completa. Para obtener más información acerca de devolución de llamada, por favor lea nuestra jQuery devolución de llamada capítulo

sintaxis alternativo

(selector).animate({styles},{options})

Parámetro Descripción
styles Necesario. Especifica una o más propiedades CSS / valores para animar (Ver valores posibles más arriba)
options Opcional. Especifica opciones adicionales para la animación. Valores posibles:
  • duration - establece la velocidad de la animación
  • easing - Especifica la función de aceleración a utilizar
  • complete - especifica una función a ejecutar después de la animación completa
  • step - especifica una función a ejecutar para cada paso en la animación
  • progress - especifica una función a ejecutar después de cada paso en la animación
  • queue - un valor booleano que especifica si debe o no poner la animación en la cola de efectos
  • specialEasing - un mapa de una o más propiedades de la CSS > parámetro de estilos, y sus correspondientes funciones de aceleración
  • start - Especifica una función a ejecutar cuando se inicia la animación
  • done - Especifica una función que se ejecuta cuando termina la animación
  • fail - especifica una función a ejecutar si la animación no completa
  • always - especifica una función a ejecutar si la animación se detiene sin completar

Inténtelo usted mismo - Ejemplos

Usando animate() con una función de devolución de llamada
Cómo utilizar animate() con una función de devolución de llamada que se repite la animación.

Ejemplo de sintaxis alternativo
El uso de la sintaxis alternativa para especificar varios estilos de animación y opciones.

Usando animate() para crear una barra de progreso
Como utilizar el animate() método para crear una barra de progreso.

Añadir el desplazamiento suave a las anclas página
Cómo utilizar animate() para agregar el desplazamiento suave de enlaces.

<Métodos de efectos jQuery