Boteco Digital

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

Categorias Javascript JQuery Web
comments powered by Disqus