Animando com JQuery

Olá pessoal como já vimos o básico para se trabalhar com a biblioteca JQuery em um artigo anterior vamos apresentar hoje alguns métodos de animação.

show() e hide()

Para começar vamos simplesmente esconder e mostrar um elemento da página para isso utilizamos o método hide() para esconder e o método show() para mostrá-lo.

$('#conteudo').hide();
 
$('.elemento').click(function(){
    $('#conteudo').show('slow');
});
 
$('.elemento2').click(function(){
    $('#conteudo').hide('fast');
});

demo

A maior parte dos métodos de animação da JQuery aceitam um parâmetro que define sua velocidade de animação em milissegundos. Existem também dois valores default que também podem ser usados: slow que equivale a 600 milissegundos e o fast que equivale a 400 milissegundos.

Se nenhum parâmetro for especificado para os métodos show() e hide() ele executarão sem nenhuma animação simplesmente aparecendo/desaparecendo.

toogle() e slideToggle()

Um efeito bastante utilizado é o de clicar em um elemento para mostrar outro e clicar novamente no mesmo link para esconde-lo sendo que para isso ele desliza na tela. Estes efeitos são implementados pela JQuery pelos métodos toggle e slideToggle().

Se você precisar apenas deslizar o elemento para cima ou para baixo e não permitir que ele volte a posição original você também pode utilizar os métodos slideUp() e slideDown().

$('a.l1').click(function(){
    $('#conteudo').toggle('slow');
});
 
$('a.l2').click(function(){
    $('#conteudo').slideToggle('slow');
});

demo

fadeIn() e fadeOut()

Outros efeitos interessantes são os fadeIn() e o fadeOut() que faz o efeito de esmaecer, ou seja, o elemento vai ficando transparente até sumir, ou o contrário.

$('a.fadein').click(function(){
    $('#conteudo').fadeIn(1000);
});
 
$('a.fadeout').click(function(){
    $('#conteudo').fadeOut(1000);
});

demo

Animate

O método animate permite uma grande flexibilidade de animação, já consegui até fazer uma abertura de site ao estilo flash utilizando-o.

O animate() permite modificar várias propriedades do elemento alvo como largura, altura, opacidade, posição, margem, etc.

O verdadeiro poder deste método é que ele permite ser chamado várias vezes em sequência permitindo animações bastante complexas.

Para chamar o método animate() utilizamos dois parâmetros com as propriedades que serão modificadas e a velocidade desta animação. Segue abaixo uma pequena lista de parâmetros que o método animate() aceita.

• width: Largura do elemento
• height: Altura do elemento
• opacity: Transparência do elemento
• marginLeft: Margem esquerda
• marginTop: Margem superior
• marginRight: Margem direita
• marginBottom: Margem inferior
• top: Posição em relação ao topo(somente funciona se a propriedade positon do CSS estiver em absolute)
• left: Posição em relação a esquerda(somente funciona se a propriedade positon do CSS estiver em absolute)
• fontSize: Tamanho da fonte
• borderWidth: Tamanho da Borda

$('a').click(function(){
    $('#conteudo').animate({width: "400",opacity : 0.2}, 1200)
    .animate({height: "400",opacity : 1},1200)
    .animate({opacity : 0.2});
});

demo

Bom foi isso, espero que tenham gostado, desculpem pelo atraso do post, falta de energia no final de semana(da companhia de eletricidade e minha 🙂 ).

Fiquem atentos no próximo post vamos brincar um pouco com ajax com JQuery.

T++.c