Efeitos básicos:

Nesse artigo vou mostrar como fazer efeitos de opacidade, revelar e ocultar elementos com o uso desta fantástica biblioteca jQuery.
Confira todos os efeitos na página de exemplos

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

Posts relacionados