O jQuery animate() método permite criar animações personalizadas.
jQuery animações - O animate() Método
O jQuery animate() método é usado para criar animações personalizadas.
Sintaxe:
$(selector).animate({params},speed,callback);O parâmetro params necessário define as propriedades CSS para ser animado.
O parâmetro de velocidade opcional especifica a duração do efeito. Ele pode ter os seguintes valores: "slow", "fast" , ou milissegundos.
O parâmetro callback opcional é uma função a ser executada após a animação completa.
O exemplo a seguir demonstra um uso simples do animate() método; ele se move um <div> elemento para a direita, até que tenha alcançado uma propriedade esquerda de 250px:
Por padrão, todos os elementos HTML têm uma posição estática, e não pode ser movido.
Para manipular a posição, lembre-se primeiro definir a propriedade position CSS do elemento a ser relative, fixed ou absolute !
jQuery animate() - manipular várias propriedades
Note-se que várias propriedades pode ser animada, ao mesmo tempo:
Exemplo
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Tente você mesmo " É possível manipular todas as propriedades CSS com o animate() método?
Sim, quase! No entanto, há uma coisa importante lembrar: todos 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.
Além disso, a animação cor não está incluído no núcleo biblioteca jQuery.
Se você deseja animar a cor, você precisa baixar o plug-in a cores Animações a partir jQuery.com.
jQuery animate() - Usando valores relativos
Também é possível definir os valores relativos (o valor é, em seguida, em relação ao valor actual do elemento). Isto é feito pondo += ou -= em frente do valor:
Exemplo
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
Tente você mesmo " jQuery animate() - Usando valores pré-definidos
Você pode até especificar valor animação de uma propriedade como "show", "hide" ou "toggle" :
Exemplo
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
Tente você mesmo " jQuery animate() - Utiliza Queue Funcionalidade
Por padrão, jQuery vem com a funcionalidade de fila para animações.
Isto significa que se você escrever múltipla animate() chama um após o outro, jQuery cria uma fila de "interno" com essas chamadas de método. Em seguida, ele corre o animado chama um por um.
Então, se você deseja executar animações diferentes um após o outro, tiramos proveito da funcionalidade de fila:
exemplo 1
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
Tente você mesmo " O exemplo a seguir primeiro movimenta o elemento <div> para a direita, e, em seguida, aumenta o tamanho da fonte do texto:
exemplo 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»
jQuery Efeitos Referência
Para uma visão completa de todos os efeitos jQuery, por favor, vá ao nosso jQuery Efeito de referência .