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.

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:

Texto animado.

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

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.