Efeito jQuery - método animate()

Manual de referência de efeitos do jQuery

Exemplo

Mudar a altura do elemento "div":

$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

Experimente você mesmo

Definição e uso

O método animate() executa animações personalizadas de conjunto de atributos CSS.

Este método altera um elemento de um estado para outro através de estilos CSS. Os valores dos atributos CSS são alterados gradualmente, permitindo criar efeitos de animação.

Apenas valores numéricos podem criar animações (por exemplo, "margin:30px"). Valores de string não podem criar animações (por exemplo, "background-color:red").

Comentário:Use "+=" ou "-=" para criar animações relativas (animations relativas).

Sintaxe 1

$(selector).animate(styles,speed,easing,callback)
Parâmetros Descrição
styles

Obrigatório. Define os estilos e valores CSS que geram efeitos de animação.

Possíveis valores de estilo CSS (fornece exemplos):

Comentário:Estilos CSS usam nomes DOM (por exemplo, "fontSize") para configurar, não nomes CSS (por exemplo, "font-size").
speed

Opcional. Define a velocidade do efeito. O padrão é "normal".

Valores possíveis:

  • milissegundos (por exemplo, 1500)
  • "slow"
  • "normal"
  • "fast"
easing

Opcional. Define a função de suavização para diferentes pontos de animação.

Funções de suavização integradas:

  • swing
  • linear

O plugin de extensão oferece mais funções de suavização.
callback

Opcional. Função a ser executada após a execução da função animate.

Para aprender mais sobre callback, acesse nossa Callback do jQuery Este capítulo.

Sintaxe 2

$(selector).animate(styles,options)
Parâmetros Descrição
styles Obrigatório. Define os estilos CSS e valores que produzem o efeito de animação (igual ao acima).
options

Opcional. Define opções adicionais para o efeito de animação.

Valores possíveis:

  • speed - configura a velocidade do efeito
  • easing - função de suavização a ser usada
  • callback - função a ser executada após a conclusão do efeito
  • step - função a ser executada após a conclusão de cada passo do efeito
  • queue - valor booleano. Indica se o efeito deve ser colocado na fila de efeitos. Se for false, o efeito começará imediatamente
  • specialEasing - de styles Mapeamento de uma ou mais propriedades CSS e suas funções de suavização correspondentes

Manual de referência de efeitos do jQuery