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 [4] 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.
