Efeito de sliding

Os métodos slideUp() e slideDown() do jQuery são utilizados para esconder ou mostrar elementos HTML através do aumento ou diminuição gradual da altura do elemento (deslizando para cima ou para baixo).

$(document).ready(function () {
  $("#btnSlideUp").click(function () {
    $("p").slideUp();
  });

  $("#btnSlideDown").click(function () {
    $("p").slideDown();
  });
});

Da mesma maneira que o efeito de hide()/show() e fadeIn()/fadeOut(), com os efeitos de sliding você também pode definir a velocidade da animação com um parâmetro.

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

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

Também similar ao hide()/show() e fadeIn()/fadeOut(), que contam o método toggle() e fadeToggle() para alternar entre os dois modos, para o efeito de sliding temos o método slideToggle(). Veja:

$(document).ready(function () {
  $("#btnSlide").click(function () {
    $("p").slideToggle();
  });
});