Como Criar Animações Com jQuery

Animações Com jQuery

O jQuery e outras bibliotecas javascript tornaram muito mais fácil adicionar pequenas animações ao website. Não muito elaborado à lá Flash, mas o suficiente para tornar a interação com as páginas muito mais interessante.

Neste tutorial será demonstrado como adicionar as animações através dos métodos nativos do jQuery, aspectos das animações e também alguns plug-ins que adicionam mais possibilidades nas animações feitas com o jQuery.

texto animado jQuery

Preparativos

Para demonstrar os exemplos de animação apresentados aqui, você vai precisar de um arquivo HTML com o seguinte código no corpo do documento:



<p>Texto animado.</p>

No cabeçalho desta página importe a última versão do jQuery



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Crie um arquivo Javascript e importe ele no documento HTML logo após a linha de importação do jQuery.

Opacidade

Este é um efeito suave que torna a navegação mais prazerosa. Dependendo da forma que é feita, torna-se quase imperceptível ao mesmo tempo em que é responsável pelo algo a mais no site.

É a animação mais básica que você pode adicionar a um link ou imagem Tanto, que o CSS 3 traz a possibilidade de fazer isso diretamente nas folhas de estilo.

O jQuery oferece três métodos para trabalhar com a opacidade: fadeIn(), fadeOut() e fadeTo(). O primeiro aumenta a opacidade, que é medida do 0 (invisível) ao 1 (visível), a segunda diminui este número e com a terceira podemos trabalhar o intervalo entre estes números.



$(function(){
  $('p').fadeOut(200);

})

Neste primeiro exemplo o texto do parágrafo desaparece da tela a uma velocidade de 200 milissegundos. Para que a opacidade demore um segundo para chegar ao zero, é preciso colocar 1000 no valor entre parênteses.

Ao invés de valores, você pode utilizar ‘fast’ ou ‘slow’ que se referem aos valores 200 e 600 respectivamente. Se não for configurado nenhum valor, a duração padrão é de 400 milissegundos.

Este efeito não remove o elemento da estrutura da página, apenas adiciona um “display:none” ao final da animação do texto.

Utilizar o fadeIn() segue o mesmo mecanismo:



  $('p').fadeIn(‘slow’);

O fadeTo() permite um maior controle sobre a animação onde você pode definir além da duração valores para a opacidade entre 0 e 1.



$('p').fadeTo(0.5,300);

O código anima faz com que o texto do parágrafo torne-se parcialmente transparente a uma velocidade de 300 milissegundos.

Todos estes três métodos permitem que uma função seja executada ao final da animação o que abre possibilidades para animações encadeadas.



  $('p').fadeOut(200, function(){
    alert('Término da animação.');
  });

Altura

Os métodos slideDown(), slideUp() e slideToggle() trabalham a altura do elemento. Escondem ou mostram com movimento deslizante.

As configurações são as mesmas mostradas acima para os efeitos de opacidade. Sendo que com o slideDown() a altura de elemento aumenta a partir do topo e com o slideUp() ela diminui em direção ao topo.

O slideToggle() para os casos em que não é possível saber se o elemento esta visível (altura 100%) ou invisível (altura 0). Se ele estiver visível o slideToggle() aplica o slideup(), caso contrário aplica o slideDown().



  $('p').slideUp(1000, function(){
    alert('Termino da animação.');
  });
  $('p').slideDown(1000);  
  $('p').slideToggle(1000);  

animate()

O animate() é o método de animação por excelência no jQuery e o mais versátil em termos de configuração. Com ele você consegue aplicar os efeitos mostrados acima e qualquer outro baseado em uma propriedade CSS que aceite valores numéricos.

Devido a flexibilidade do método, vamos analisar baseado na sintaxe

.animate( properties, [ duration ], [ easing ], [ callback ] )

A primeira informação a ser fornecida para o método são as propriedades CSS a serem animadas. Vale margem, espaçamento, tamanho da fonte, largura, altura e outras que aceitem número. Falando em número, se você informar apenas o número e não a unidade de medida, será entendido que você se refere a pixels. Se você quiser utilizar porcentagem, pode apenas lembra de colocar entre aspas: ‘150%’.

O interessante é que algumas propriedades aceitam os valores show, hide e toggle. Então ao invés de digitar “width:100px” para mostrar uma div por exemplo, você pode digitar “width:show”.

Em seguida você define qual a duração da animação. O tempo será medido em milissegundos, mas se preferir pode indicar a velocidade com fast ou slow.

Os dois últimos parâmetros são de uso facultativo.

O easing permite que a progressão da animação ocorra de maneira não linear, um ponto mais rápido ou mais vagaroso. Deixa a animação muito mais interessante. As opções ‘linear’ e ‘swing’ que vem por padrão com o jQuery não valem muito a pena. Então você pode utilizar o plugin jQuery Easing Plugin que possibilita maior controle sobre este aspecto das animações sendo totalmente integrável ao método.

O parâmetro callback permite que seja executado código ao termino da animação.

Vejamos alguns exemplos da utilização do animate():



$('p').animate({fontSize:50},500, function(){
    $(this).animate({marginLeft:50},300);
    }
  );

Após aumentar o tamanho da fonte para 50 pixels, é iniciada outra animação deslocando o texto 50 pixels da borda esquerda. Observe que a propriedade CSS é escrita em camelCase.



  $('p').animate({
    opacity:0.2,
    padding:10,
    marginLeft:150,
    width:'hide'
    },'slow');  

Diversas propriedades podem ser animadas ao mesmo tempo, sendo que altura, largura e opacidade aceitam os valores show e hide.

Se você tiver importado o plugin jQuery Easing Plugin, os valores que ele oferece serão postos após a duração:



  $('p').animate({marginLeft:150},'slow','easeInCubic');  

:animated

Não raro, alguns elementos são animados diversas vezes e nem sempre em sequencia exata. Com o seletor :animated é possível atingir os elementos que estão sendo animados.



  $('p').animate({marginLeft:150},200);  
  $('p:animated').css({color:"#ff0000"});

Mais uma forma de chamar a atenção do visitante para alterações na página.

delay

As animações podem ser encadeadas tornando-se mais completas. Você pode engatar um slideDown() a um fadeTo() e este a um animate(). Mas se por algum motivo você quer que haja um intervalo entre eles, temos à mão o delay().

Ele tem o papel de retardar a execução por alguns milissegundos.



$('p').css({display:"none"}).slideDown().fadeTo(0.7, 'slow').delay(500).animate({marginLeft:50},300);

O texto foi escondido para podermos iniciar a animação. O texto então aparece com efeito deslizante, tem a opacidade reduzida e então a fila para por meio segundo devido ao delay(). E somente depois desse tempo o elemento de parágrafo tem a margem esquerda alterada.

Dica Para Evitar Problemas Com Animação Repetitiva

Adiconamos ao parágrafo um efeito em que o texto desliza alguns pixels para a direita quando o mouse passar sobre o texto e depois ele volta a posição normal.



  $('p').hover(function(){
    $(this).animate({marginLeft:20},500)},
  function(){
    $(this).animate({marginLeft:0},500);  
  })

Desta maneira ele funciona normalmente. Mas, ao passar o mouse rapidademente diversas vezes, vemos o problema: a animação continua mesmo sem o mouse sobre o texto.

Para evitar este problema, basta adicionar stop() antes que a animação comece, com isso, toda a animação que estiver acontecendo vai parar e a fila será reiniciada com a animação atual.



  $('p').hover(function(){
    $(this).stop().animate({marginLeft:20},500)},
  function(){
    $(this).stop().animate({marginLeft:0},500);  
  })

Conclusão

Quando bem explorados e integrados, os métodos de animação nativos do jQuery tornarão o website muito mais interessante e isso sem muitas linhas de comando.

Be Sociable, Share!

3 Comentários

  1. Muito bom mesmo, eu tava com muita dificudade de aprender jquery agora tou mais esperto

  2. Alexander Pataki

    Cara.. muito bom este seu post… me ajudou bastante com os alertas para o usuario, quando ele entra na tela e eu quero destacar algo.

  3. Joao Claudio

    Amigo, voce poderia mostrar um exemplo de efeito onde imagem e texto fossem animados, como nesses banners profissionais ?

Participa! Comenta...