tutoriais mais recente desenvolvimento web
 

jQuery animate() Method

<Métodos jQuery Effect

Exemplo

"Animar" um elemento, alterando sua altura:

$("button").click(function(){
    $("#box").animate({height: "300px"});
});
Tente você mesmo "

Definição e Uso

O animate() método executa uma animação personalizada de um conjunto de propriedades CSS.

Este método altera um elemento de um estado para outro com estilos CSS. O valor da propriedade CSS é alterada de forma gradual, para criar um efeito animado.

Apenas valores numéricos podem ser animadas (como "margin:30px" ). Valores de cadeia não pode ser animada (como "background-color:red" ), exceto para o cordas "show", "hide" e "toggle" . Estes valores permitem ocultar e mostrar o elemento animado.

Dica: Use "+=" "-=" "+=" "-=" Para animações relativos.

Sintaxe

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

Parâmetro Descrição
styles Requeridos. Especifica um ou mais CSS propriedades / valores para animar.

Nota: Os nomes de propriedade deve ser camel-encaixotado quando usado com o animate() método: Você vai precisar para escrever paddingLeft vez de padding-left, marginRight vez de margin-right, e assim por diante.

As propriedades que podem ser animados:


Apenas valores numéricos podem ser animadas (como "margin:30px" ). Valores de cadeia não pode ser animada (como "background-color:red" ), exceto para o cordas "show", "hide" e "toggle" . Estes valores permitem ocultar e mostrar o elemento animado.

Dica: animações de cor não estão incluídos no núcleo da biblioteca jQuery.Se você deseja animar a cor, você precisa baixar o plug-in a cores Animações a partir jQuery.com
speed Opcional. Especifica a velocidade da animação. O valor padrão é 400 milissegundos

Valores possíveis:

  • milissegundos (como 100, 1000, 5000, etc)
  • "slow"
  • "fast"
easing Opcional. Especifica a velocidade do elemento em diferentes pontos da animação. O valor padrão é "swing" . Valores possíveis:
  • "swing" - move mais lento no início / fim, mas mais rápido no meio
  • "linear" - se move em uma velocidade constante
Dica: Mais funções de atenuação estão disponíveis em plugins externos.
callback Opcional. A função a ser executada após a animação completa. Para saber mais sobre retorno de chamada, por favor leia nossa jQuery Callback capítulo

Sintaxe alternativo

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

Parâmetro Descrição
styles Requeridos. Especifica uma ou mais propriedades CSS / valores para animar (Veja possíveis valores acima)
options Opcional. Especifica opções adicionais para a animação. Valores possíveis:
  • duration - define a velocidade da animação
  • easing - especifica a função de atenuação de usar
  • complete - especifica uma função a ser executada após a animação completa
  • step - especifica uma função a ser executada para cada etapa na animação
  • progress - especifica uma função a ser executada depois de cada passo na animação
  • queue - um valor booleano que especifica se deve ou não colocar a animação na fila de efeitos
  • specialEasing - um mapa de uma ou mais propriedades CSS da > parâmetro estilos, e suas funções correspondentes de atenuação
  • start - especifica uma função a ser executada quando a animação começa
  • done - especifica uma função a ser executada quando a animação termina
  • fail - especifica uma função a ser executada se a animação não completar
  • always - especifica uma função a ser executada se a animação parar sem concluir

Tente você mesmo - Exemplos

Usando animate() com uma função de retorno
Como usar animate() com uma função de chamada de retorno que se repete a animação.

Exemplo sintaxe alternativa
Usando a sintaxe alternativa para especificar vários estilos de animação e opções.

Usando animate() para criar uma barra de progresso
Como usar o animate() método para criar uma barra de progresso.

Adicionar rolagem suave para âncoras página
Como usar animate() para adicionar rolagem suave para links.

<Métodos jQuery Effect