Efeitos jQuery - Animação
Com jQuery, você pode criar animações personalizadas.
Animações jQuery - O método animate()
O método jQuery animate()é usado para criar animações personalizadas.
Sintaxe:
$(selector).animate({params},speed,callback);
O parâmetro obrigatório params define as propriedades CSS a serem animadas.
O parâmetro opcional de velocidade especifica a duração do efeito. Pode assumir os seguintes valores: "lento", "rápido" ou milissegundos.
O parâmetro de retorno de chamada opcional é uma função a ser executada após a conclusão da animação.
O exemplo a seguir demonstra um uso simples do animate()método; ele move um elemento <div> para a direita, até atingir uma propriedade esquerda de 250px:
Exemplo
$("button").click(function(){
$("div").animate({left: '250px'});
});
Por padrão, todos os elementos HTML têm uma posição estática e não podem ser movidos.
Para manipular a posição, lembre-se de primeiro definir a propriedade de posição CSS do elemento para relativa, fixa ou absoluta!
jQuery animate() - Manipular várias propriedades
Observe que várias propriedades podem ser animadas ao mesmo tempo:
Exemplo
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
É possível manipular TODAS as propriedades CSS com o método animate()?
Sim quase! No entanto, há uma coisa importante a ser lembrada: todos os nomes de propriedade devem estar em camel case quando usados com o método animate(): você precisará escrever paddingLeft em vez de padding-left, marginRight em vez de margin-right e assim por diante.
Além disso, a animação em cores não está incluída na biblioteca principal do jQuery.
Se você deseja animar cores, precisa baixar o
plug- in Color Animations do jQuery.com.
jQuery animate() - Usando valores relativos
Também é possível definir valores relativos (o valor é então relativo ao valor atual do elemento). Isso é feito colocando += ou -= na frente do valor:
Exemplo
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate() - Usando valores predefinidos
Você pode até especificar o valor de animação de uma propriedade como " show", " hide" ou " toggle":
Exemplo
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
jQuery animate() - Usa a funcionalidade de fila
Por padrão, o jQuery vem com funcionalidade de fila para animações.
Isso significa que se você escrever várias animate()chamadas uma após a outra, o jQuery cria uma fila "interna" com essas chamadas de método. Em seguida, ele executa as chamadas de animação ONE by ONE.
Portanto, se você deseja realizar animações diferentes umas das outras, aproveitamos a funcionalidade da 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");
});
O exemplo abaixo primeiro move o <div>elemento 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");
});
Exercícios de jQuery
Referência de efeitos jQuery
Para uma visão geral completa de todos os efeitos do jQuery, acesse nossa Referência de Efeitos do jQuery .