BotecoDigital.info

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.

1
2
3
4
5
6
7
8
9

    $('#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().

1
2
3
4
5
6
7

    $('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.

1
2
3
4
5
6
7

    $('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() uilizamos 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: Transparencia 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

1
2
3
4
5

         $('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