O Jquery em suas funcionalidades possui vários efeitos e ferramentas de animação, desde as mais simples, as mais sofisticadas e outras ainda mais elaboradas oferecida por plugins. Para começar, vou mostrar efeitos básicos de animação que vem incluindo no Jquery.

Montei um arquivo que por si só já é explicativo e mostra os efeitos e exemplos.

Efeitos de animação usando o Jquery

Na animação 01, usa-se o animate, que é usado para criar animações personalizadas, com ela você muda atributos do CSS. Se por exemplo, a altura do elemento é 100px no css e você coloca no animate o parâmetro height para 200px, haverá um redimensionamento com animação. Neste exemplo fiz uma animação usando o posicionamento e a transparência para gerar este movimento. O código encontra-se abaixo:

// Efeito animate
$(".exemplo:eq(0)").toggle(
function(){$(".alvo:eq(0)").animate({left: 10,
 opacity: 'toggle'},"slow");},
 function(){
   $(".alvo:eq(0)").animate({left: 50, opacity: 1},
   "slow");

 });

A opção toggle, como pode-se perceber é muito usado no Jquery. Ela altera propriedades e volta ao estado anterior. O toggle como evento, como foi feito no exemplo, aceita dois parâmetros, esses são as funções que iram ser disparadas no primeiro e no segundo clique respectivamente. Para o toggle na propriedade animate e na propriedade opacity(transparência), ele altera a propriedade de um extremo a outro, ou seja, se tiver 1(opaco) ele passa para 0(transparente) ou vice-versa.

É importante salientar que para animações de posição tive que no CSS alterar o position para relative e especificar a posição a ser alterada:

.alvo {
width: 80%;
height: auto;
background-color: #B9C6D1;
color: #115780;
margin: 5px;
padding: 10px;
left: 40px;
position: relative;
}

O restante das animações na verdade são variações do animate, são atalhos para fazer o animate “espefícico”, por isto comecei por ele. O fade, por exemplo, altera a propriedade opacity, o slide altera a posição e assim por diante. Eles são “atalhos” para conseguir um efeito mais simples.

Na animação 5, foi usado um callback, que é uma função para ser executada quando a respectiva animação terminar. Muitos métodos do Jquery aceitam callback, inclusive para animações. Neste caso, usei o callback para se obter uma animação de de fadeIn e fadeOut eterna. O código está no exemplo e é bastante autoexplicativo, pois ao terminar uma animação ele executa uma que tem como callback a primeira e assim indefinidamente. Para parar a animação, é necessário o plugin Interface. Ela é bastante completa e possui vários arquivos, o necessário para parar a animação é somente um arquivo – o ifx.js. Com ele apenas utiliza-se o método stop ou stopAll no elemento que está sendo animado para parar a animação. Este plugin merece um post a parte.

Suporte

As animações foram testadas no IE 6, 7, Firefox 2.x e Opera. Este último não funcionou muito bem. Pude notar fazendo outros testes, que o Opera não aceita bem animações que usam transparência. O plugin de Interace funcionou para o Opera em suas animações, mas muitos funcionam sem alterar a transparência. Já os movimentos e easing, no Interface foi aceito pelo Opera, mas as animações do Jquery não. Se você utilizar um show e hide, por exemplo, ele irá esconder e mostrar como pedido, mas no Opera não acontecerá nenhuma animação.

Espero que tenham gostado e este é só o começo das capacidades do Jquery com a animação. Com os plugins, pode-se fazer muito mais. Muitos acham que se aproximam do flash e até extremistas “radicais” 🙂 acham que o Jquery vai acabar com o Flash. Cada um tem seu papel, inclusive o nosso é saber o que usar e onde usar.

6 Replies to “Efeitos de animação com o Jquery”

  1. Olá Alexandre. Muito bom seu site e muito legal essas animações com Jquery. Só tenho uma dúvida. Fiz um form simples em php para fazer upload de arquivos. Para mostrar aos usuários que o arquivo está sendo carregado no servidor, resolvi colocar a animação 5 quando o botão ‘Enviar’ é clicado. O problema é que quando coloco class=”exemplo” no botão, a animação se inicia mas não é feito o upload do arquivo. Quando eu tiro o class=”exemplo” do botão, o arquivo é enviado mas a animação não se inicia. Você poderia me ajudar a resolver isso? Desde já, obrigado.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *