Tutorial com JQuery Animate()
O que é o animate() da Jquery? É uma função dessa API para manipular elementos do HTML e adicionar a funcionalidade de animação.A sua utilização é muito simples, veja a sintaxe de sua função.
.animate(properties, [duration], [easing], [callback])
properties: identifica a propriedade do CSS que a animação vai interagir.
duration: uma string ou número que determina quanto tempo a animação será executado.
easing: uma string indicando qual função de easing será utilizada na transição.
callback: é a função para chamar a animação.
.animate(properties, options)
properties: identifica a propriedade do CSS que a animação vai interagir.
options: Opções adicionais para enviar ao método.
- - duration: uma string ou número que determina quanto tempo a animação será executado.
- - easing: uma string indicando qual função de easing será utilizada na transição.
- - complete: função para chamar a animação completa.
- - step: uma função para ser chamada depois de cada passo da animação.
- - queue: um boolean para determinar se a animação entra na fila de efeitos. Se o parâmetro for false, a animação vai dar seu início imediato.
- - specialEasing: identifica uma ou mais propriedades do CSS definidos pelos argumentos, propriedades e as suas funções do easing.
Para dar início a sua animações é necessário primeiro incluir a biblioteca javascript JQuery em seu arquivo HTML.
Para todos os exemplos vou usar a TAG DIV para fazer a animações, com seu correspondente HTML e CSS.
Animate Content
Primeira animação
Com a função animate() vamos aumentar a altura da DIV.
$("#animate").click(function() {
$("#content").animate(
{"height": "100px"},
"fast");
});
Demonstração 1:
animar altura
Segunda animação
Com a função animate() vamos aumentar a largura da DIV.
$("#animate").click(function() {
$("#content").animate(
{"width": "350px"},
"fast");
});
Demonstração 2:
animar largura
Terceira animação
Com a função animate() vamos alterar a nível de opacidade da DIV, Animate Opacity.
$("#animate").click(function() {
$("#content").animate(
{"opacity": "0.15"},
"slow");
});
Demonstração 3:
animar opacidade
Mover os elementos usando animate()
Move
Quarta animação
Com a função animate() vamos mover o elemento DIV para a direção esquerda e também para direita.
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
Demonstração 4:
Move
Quinta animação
Callback FunctionFunções Callback são muito úteis para realizar uma determinada ação, quando a animação terminar.
Vamos ver um exemplo onde usamos a função de callback para exibir uma mensagem quando animação for concluído.
$("#animate").click(function() {
$("#content").animate(
{"height": "100px", "width": "250px"},
"slow", function(){
$(this).html("Animation Completed");
});
});
Demonstração 5:
Callback demo
Sexta animação
Combinar multiplas animaçõesNeste exemplo vamos animar o elemento DIV as suas propriedades width e height no mesmo tempo.
Veja o código abaixo como realizar esse tipo de animação.
$("#animate").click(function() {
$("#content").animate(
{"height": "100px", "width": "250px"},
"slow", );
});
$("#animate").click(function() {
$("#content")
.animate({"height": "100px"}, 500)
.animate({"width": "250px"}, 500);
});
Demonstração 6:
Callback demo