Efeitos com jQuery

Quem já sabe o que é jQuery, sabe que essa bibioteca JavaScript nos permite a realização de efeitos complexos de uma forma rápida, fácil e o melhor, com pouco código.

Nesse artigo vou mostrar como fazer efeitos de opacidade, revelar e ocultar elementos com o uso da fantástica biblioteca jQuery.

Para disparar a ação utilizamos um botão.

Confira todos os efeitos na página de exemplos de efeitos jQuery.

Efeitos básicos:

show

Exibe o elemento alvo do seletor jQuery que tenha sido escondido.

    $("button").click(function () {
      $("p").show("slow");
    });

Como parâmetro podemos passar slow, normal e fast para velocidade lenta, normal e rápida respectivamente. Podemos digitar um número em milissegundos

hide

Oculta o elemento alvo do seletor jQuery.

    $("button").click(function () {
      $("p").hide("fast");
    });

Efeitos deslizantes:

slideDown

Revela o conteúdo suavemente de cima para baixo

    $("button").click(function () {
      $("p").slideDown(1000);
    });

slideUp

Oculta o conteúdo suavemente de baixo para cima

    $("button").click(function () {
      $("p").slideUp("fast");
    });

Efeitos de opacidade:

fadeIn

Revela o elemento oculto iniciando em 0% (oculto) até 100% (visível)

    $("button").click(function () {
      $("p").fadeIn("fast");
    });

fadeOut

Oculta o elemento iniciando em 100% (visível) até 0% (oculto)

    $("button").click(function () {
      $("p").fadeOut("fast");
    });

Confira todos os efeitos na página de exemplos de efeitos jQuery.

Me siga no Twitter: @kadunew
Forte abraço!