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:

<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.