Método animate

El método animate permite crear efectos de animación para varias propiedades CSS. El único parámetro obligatorio - un objeto con propiedades CSS, similar al que pasamos al método css. Muchas propiedades que tienen valores no numéricos o varios valores no pueden ser animadas por la funcionalidad básica de jQuery (por ejemplo background-color). Tampoco siempre se admiten nombres abreviados de propiedades CSS, por ejemplo font - en su lugar hay que usar fontSize o font-size. Antes de los valores se puede poner '+=' o '-=', en tal caso el valor especificado a continuación se sumará o restará del valor actual de la propiedad. También en lugar de valores numéricos se puede poner show, hide o toggle. Todos los efectos de jQuery, incluyendo animate, se pueden desactivar globalmente, usando la configuración jQuery.fx.off = true, que establece el valor de la duración en 0.

Sintaxis

El primer parámetro de la animación es un objeto con propiedades CSS y sus valores en formato clave: valor, que vamos a animar. El resto de parámetros se consideran opcionales. El segundo parámetro - define la duración de la animación en milisegundos, 400ms por defecto. El tercer parámetro es la función de suavizado para la transición (por defecto es swing), y el cuarto - una función callback, que se ejecutará después de completar la animación:

.animate(propiedades, [duración ], [función de suavizado ], [función callback ]);

El tiempo se puede especificar no solo en milisegundos, sino también con palabras clave slow (600ms) y fast (200ms), cuanto mayor es el valor, más lenta es la animación. Se puede pasar al método como segundo parámetro varias opciones, en forma de objeto JavaScript, que contiene pares clave: valor:

.animate(propiedades, opciones);

Por ejemplo, establezcamos para las propiedades CSS width y height el valor toggle. La duración en 5000ms, pasaremos las funciones de suavizado en forma de objeto, para el ancho será una función lineal, y para la altura - easeOutBounce, también al finalizar la animación se ejecutará una vez la función (ver clave complete), que después del elemento con #test colocará un div con el texto 'Animation complete.':

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Animation complete.</div>');
	}
});

A continuación en la tabla se muestran las propiedades y métodos del objeto options y su descripción:

Nombre	Descripción
`duration`	Duración de la animación en milisegundos - cadena o número. `400ms` por defecto.
`easing`	Define qué función de suavizado usar. `swing` por defecto.
`queue`	Valor booleano o cadena. `true` por defecto. Indica - poner la animación en cola. Con el valor `false` la animación comenzará inmediatamente. Si el parámetro se pasa como cadena, entonces la animación se pondrá en la cola, representada por este parámetro. Al usar una cola con nombre personalizado, la animación no se iniciará automáticamente, para iniciarla - use `dequeue('queuename')`.
`specialEasing`	Aquí puede pasar un objeto, en el que las claves serán propiedades CSS, y los valores - las correspondientes funciones de suavizado.
`step`	Función, que se llama para cada propiedad animada de cada elemento animado. Permite modificar el objeto `Tween` para cambiar el valor de la propiedad antes de que se establezca. Como parámetros acepta el valor actual de `tween` y el objeto `Tween`.
`progress`	Función, llamada después de cada paso de la animación, solo una vez por cada elemento independientemente del número de propiedades animadas. La función acepta tres parámetros `animation` (en forma de promesa), `progress` (número de `0` a `1`) y `remainingMs` (número de milisegundos restantes).
`complete`	Función, llamada una vez después del final de la animación del elemento. La función acepta `animation` (en forma de promesa).
`start`	Función, que se llama cuando la animación del elemento comienza. La función acepta `animation` (en forma de promesa) y `jumpedToEnd` (Valor booleano. Si `true`, entonces la animación automáticamente finaliza).
`done`	Función, que se llama cuando la animación del elemento termina (su promesa se completa exitosamente). La función acepta `animation` (en forma de promesa) y `jumpedToEnd` (Valor booleano. Si `true`, entonces la animación automáticamente finaliza).
`fail`	Función, que se llama cuando la animación del elemento termina con error (su promesa se completa con error). La función acepta `animation` (en forma de promesa) y `jumpedToEnd` (Valor booleano. Si `true`, entonces la animación automáticamente finaliza).
`always`	Función, que se llama cuando la animación del elemento se completa o se detiene sin completarse (su promesa se completa exitosamente o con error). La función acepta `animation` (en forma de promesa) y `jumpedToEnd` (Valor booleano. Si `true`, entonces la animación automáticamente finaliza).

Ejemplo

Vamos a hacer que al pulsar el botón #left, desplacemos el cuadrado verde a la izquierda, y al botón #right a la derecha en 50px, también establezcamos la duración en 600ms - con el comando slow:

<button id="left">left</button>
<button id="right">right</button>
<div class="block"></div>

div {
	position: absolute;
	background-color: green;
	left: 50px;
	width: 100px;
	height: 100px;
	margin: 5px;
}

$('#right').click(function() {
	$('.block').animate({'left': '+=50px'}, 'slow');
});
	
$('#left').click(function() {
	$('.block').animate({'left': '-=50px'}, 'slow');
});

Ver también

método show,
que muestra suavemente los elementos
método stop,
que permite detener la animación iniciada
método delay,
que establece un retraso en la ejecución de eventos
propiedad jQuery.fx.off,
que permite desactivar globalmente la animación
selector animated,
que selecciona elementos, que en este momento están involucrados en una animación