Animando com o método Animate do jQuery
Olá a todos, em um outro artigo falamos a respeito do conflito da animação entre Flash x jQuery, hoje veremos como animar com jQuery utilizando o método Animate.
Como funciona
O conceito de animação fala na transição entre 2 pontos dentro de um determinado tempo, assim podemos pensar que, como o jQuery é uma biblioteca javascript baseada no CSS, o ponto inicial seria um valor para uma determinada propriedade CSS e o ponto final um outro valor para essa propriedade.
O método Animate trabalha com o mesmo pensamento, seletores CSS e a animação trabalha as propriedades CSS, assim informamos quem queremos animar, a propriedade a ser animada, o valor para o ponto final e o tempo em que a animação deve acontecer. Ok, agora só falta definir o ponto inicial certo? Errado, o ponto inicial já está defnido no CSS, o jQuery, quando bem implementado, é executado após o carregamento da página e portanto os elementos já possuem um valor definido.
Importante: Nunca se esqueça que para todo projeto em que trabalhamos com a biblioteca jQuery devemos inseri-la à nossa página. saiba mais...
A Sintaxe
$(seletor).animate({
propriedade: valor
}, tempo);
$(seletor) - Quem será selecionado. (Conheça mais sobre seletores)
.animate - Chamada do método
propriedade - propriedade CSS a ser animada
valor - valor final da propriedade animada
tempo - Tempo de execução da animação em milesegundos
Callback Complete
Temos também a possibilidade de chamar uma função ao término de uma animação, assim a sintaxe é alterada para o formato abaixo:
$(seletor).animate({
propriedade: valor
}, tempo, function(){
//considerações
})
Essa nova sintaxe é praticamente idêntica a anterior, somente levando a adição de uma função onde colocaremos o bloco de código que deverá ser executado após o término da animação.
Utilizando Easing
Os efeitos de ease são pequenas alterações a animação padrão, onde podemos acelerar ou desacelerar uma animação, utilizar um efeito elástico, entre outros efeitos que você pode conferir aqui. Porém o ease não é padrão da biblioteca jQuery, para utilizarmos devemos incorporar a nossa página o arquivo de extensão da biblioteca, para que assim ela possua os efeitos incorporados.
Para fazer o download do arquivo que permite que o jQuery utilize os efeitos ease clique aqui.
A sintaxe para utilizar os efeitos de ease não muda em nada a maneira de declarar a animação, somente na parte onde indicamos o tempo e callback, confira a baixo:
$(seletor).animate({
propriedade: valor,
propriedade: valor
}, {duration: tempo, easing:"efeito"});
O efeito easing pode ser de 4 tipos: Elastic, Quad, Bounce ou Back. Levando consigo um indicador de aumento ou diminuição da velocidade da animação durante sua execução através do prefixo easeIn e easeOut respectivamente.
Em qualquer um dos casos podemos usar mais de uma propriedade, mas devemos sempre nos lembrar de terminar cada linha de propriedade com uma vírgula, e a última linha de propriedades deve sempre terminar sem o uso da vírgula.
Animate na Prática
Para trabalharmos o método Animate na prática, vamos utilizar como exemplo um menu marcado com a estrutura de lista e formatado com css conforme você pode acompanhar abaixo:
<ul class="menu">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
.container{width:660px; margin:30px auto; }
.exemplo{float:left; width:200px; margin-right:20px;}
.menu{overflow:hidden; margin:0; padding:0;}
.menu li{display:block; margin:5px 0; background:#eee; padding:5px 10px; width:150px; font-size:11px; font-family:Verdana, Geneva, sans-serif;}
Agora veremos como aplicar o método Animate.
$(document).ready(function(){
//Animate
$('.menu li').mouseover(function(){
$(this).stop();
$(this).animate({
width: 180 + 'px'
}, 500);
});
$('.menu li').mouseout(function(){
$('.menu li').stop();
$('.menu li').animate({
width: 150 + 'px'
}, 500);
});
//Animate com Callback
$('.menu li').mouseover(function(){
$(this).stop();
$(this).animate({
width: 180 + 'px'
}, 500, function(){
//função de callback
$(this).animate({
paddingTop: 15 + 'px',
paddingBottom: 15 + 'px'
}, 500);
});
});
$('.menu li').mouseout(function(){
$('.menu li').stop();
$('.menu li').animate({
width: 150 + 'px',
paddingTop: 5 + 'px',
paddingBottom: 5 + 'px'
}, 500);
});
//Animate com Easing
$('.menu li').mouseover(function(){
$(this).stop();
$(this).animate({
width: 180 + 'px'
}, {duration: 500, easing:"easeOutBounce"});
});
$('.menu li').mouseout(function(){
$('.menu li').stop();
$('.menu li').animate({
width: 150 + 'px',
paddingTop: 5 + 'px',
paddingBottom: 5 + 'px'
}, 500);
});
});
No script separei em 3 blocos de codigo as diferentes sintaxes do método animate, escolha qual irá utilizar e aplique-o como acima, nunca esquecendo de chamar seu codigo dentro de um evento Ready aplicado ao documento para termos a certeza que os elementos já foram criados quando o script for rodado.
Nesse exemplo aplicamos o método animate aos itens da lista dentro de um evento mouseover, ou seja, ao passarmos o cursor sobre um dos itens da lista onde, através do seletor $(this), indicamos que o item a ser animado é aquele que está recebendo o evento. Já no evento mouseout indicamos com o seletor $('.menu li') que todos os itens presentes dentro do elemento com classe menu devem receber a animação, assim todos voltam ao normal e somente aquele que passamos o mouse recebe uma animação diferenciada.
Importante: O método animate no nosso exemplo é disparado toda vez que passamos o mouse e toda vez que o retiramos de um item da lista, e com isso o jQuery vai acumular animações. Vamos explicar melhor: o usuário passa o cursor sobre o item e dispara o método, antes de terminar a animação ele retira o cursor e passa de novo por exemplo; fazendo isso será formado uma fila de métodos, um primeiro método que está em execução, e mais 2 métodos em espera: um do ecento de mouseout e outro desse segundo evento mouseover. Exatamente para corrigir esse problema é que usamos o método stop(). Esse método para o objeto, e como um objeto parado não tem animação, ao fazermos isso limpamos essa fila de métodos antes de disparar um novo.
Caso queira conhecer a documentação do método, clique aqui.
Para fazer o download do exemplo utilizando cada uma das maneiras de usar o animate que estudamos nesse tutorial, clique aqui.
Espero que tenham gostado do tutorial, um abraço e até a próxima.
voltar