Método animate

O método animate permite criar efeitos de animação para várias propriedades CSS. O único parâmetro obrigatório - um objeto com propriedades CSS, semelhante ao que passamos para o método css. Muitas propriedades que têm valores não numéricos ou vários valores não podem ser animadas pela funcionalidade básica do jQuery (por exemplo background-color). Também nem sempre são suportados nomes abreviados de propriedades CSS, por exemplo font - em vez disso, deve usar fontSize ou font-size. Antes dos valores, pode colocar '+=' ou '-=', neste caso o valor especificado a seguir será adicionado ou subtraído do valor atual da propriedade. Também em vez de valores numéricos pode colocar show, hide ou toggle. Todos os efeitos jQuery, incluindo animate, podem ser desativados globalmente, usando a configuração jQuery.fx.off = true, que define o valor da duração para 0.

Sintaxe

O primeiro parâmetro da animação é um objeto com propriedades CSS e seus valores no formato chave: valor, que pretendemos animar. Os restantes parâmetros são considerados opcionais. O segundo parâmetro - define a duração da animação em milissegundos, 400ms por padrão. O terceiro parâmetro é a função de easing para a transição (por padrão é swing), e o quarto - uma função de callback, que será executada após a conclusão da animação:

.animate(propriedades, [duração ], [função de easing ], [função de callback ]);

O tempo pode ser definido não apenas em milissegundos, mas também com as palavras-chave slow (600ms) e fast (200ms), quanto maior o valor, mais lenta a animação. Pode passar ao método várias opções como segundo parâmetro, na forma de um objeto JavaScript, contendo pares chave: valor:

.animate(propriedades, opções);

Por exemplo, vamos definir para as propriedades CSS width e height o valor toggle. A duração em 5000ms, passaremos as funções de easing na forma de objeto, para a largura será uma função linear, e para a altura - easeOutBounce, também após a conclusão da animação, a função será executada uma vez (ver a chave complete), que após o elemento com #test colocará um div com a inscrição 'Animation complete.':

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

Abaixo na tabela são apresentadas as propriedades e métodos do objeto options e sua descrição:

Nome	Descrição
`duration`	Duração da animação em milissegundos - string ou número. `400ms` por padrão.
`easing`	Define qual função de easing usar. `swing` por padrão.
`queue`	Valor booleano ou string. `true` por padrão. Indica - se deve colocar a animação na fila. Com o valor `false` a animação começará imediatamente. Se o parâmetro for passado como string, então a animação será colocada na fila representada por este parâmetro. Ao usar uma fila com um nome personalizado, a animação não inicia automaticamente, para iniciá-la - use `dequeue('nomeDaFila')`.
`specialEasing`	Aqui você pode passar um objeto, onde as chaves serão propriedades CSS, e os valores - as funções de easing correspondentes a elas.
`step`	Função que é chamada para cada propriedade animada de cada elemento animado. Ela permite modificar o objeto `Tween` para alterar o valor da propriedade antes que ele seja definido. Como parâmetros, aceita o valor atual de `tween` e o objeto `Tween`.
`progress`	Função chamada após cada passo da animação, apenas uma vez para cada elemento, independentemente do número de propriedades animadas. A função aceita três parâmetros `animation` (como uma promessa), `progress` (número de `0` a `1`) e `remainingMs` (número de milissegundos restantes).
`complete`	Função chamada uma vez após o término da animação do elemento. A função aceita `animation` (como uma promessa).
`start`	Função que é chamada quando a animação do elemento começa. A função aceita `animation` (como uma promessa) e `jumpedToEnd` (Valor booleano. Se `true`, então a animação automaticamente é concluída).
`done`	Função que é chamada quando a animação do elemento termina (sua promessa é cumprida com sucesso). A função aceita `animation` (como uma promessa) e `jumpedToEnd` (Valor booleano. Se `true`, então a animação automaticamente é concluída).
`fail`	Função que é chamada quando a animação do elemento termina com erro (sua promessa é rejeitada). A função aceita `animation` (como uma promessa) e `jumpedToEnd` (Valor booleano. Se `true`, então a animação automaticamente é concluída).
`always`	Função que é chamada quando a animação do elemento é concluída ou parada sem conclusão (sua promessa é cumprida com sucesso ou rejeitada). A função aceita `animation` (como uma promessa) e `jumpedToEnd` (Valor booleano. Se `true`, então a animação automaticamente é concluída).

Exemplo

Vamos, ao clicar no botão #left, mover o quadrado verde para a esquerda, e no botão #right para a direita em 50px, também vamos definir a duração para 600ms - com o 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');
});

Veja também

método show,
que exibe elementos suavemente
método stop,
que permite parar uma animação em execução
método delay,
que define um atraso na execução de eventos
propriedade jQuery.fx.off,
que permite desativar a animação globalmente
seletor animated,
que seleciona elementos que atualmente estão envolvidos em uma animação