Efeito de hide/show

Com o jQuery, é possível esconder e mostrar elementos HTML previamente selecionados com os métodos hide() e show(). Veja um exemplo na prática:

$(document).ready(function () {
  $("#btnShow").click(function () {
    $("p").show();
  });

  $("#btnHide").click(function () {
    $("p").hide();
  });
});

É possível também especificar um parâmetro adicional nos métodos de hide() e show(), de forma que você pode controlar a velocidade do efeito. Você pode usar a palavra "slow" para devagar, "fast" para rápido, ou então especificar um valor inteiro em milisegundos. Por exemplo:

$(document).ready(function () {
  $("#btnHide").click(function () {
    $("p.normal").hide();
    $("p.rapido").hide("fast");
    $("p.devagar").hide("slow");
    $("p.muito-rapido").hide(50);
    $("p.muito-devagar").hide(2000);
  });

  $("#btnShow").click(function () {
    $("p.normal").show();
    $("p.rapido").show("fast");
    $("p.devagar").show("slow");
    $("p.muito-rapido").show(50);
    $("p.muito-devagar").show(2000);
  });
});

O segundo parâmetro opcional é uma função de callback que será executada após o método hide() ou show() ser completado. Falaremos mais sobre isso ainda nesta aula.

Você pode alternar entre esconder e mostrar um elemento HMTL com o método toggle(). Caso o elemento esteja escondido, toggle() irá atuar como o método show(). Caso o elemento esteja visível, toggle() irá atuar similar ao método hide(). Veja um exemplo:

$(document).ready(function () {
  $("#btn").click(function () {
    $("p").toggle();
  });
});