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