Efeito de fading

Você pode utilizar os métodos jQuery de fadeIn() e fadeOut() para mostrar ou esconder elementos HTML através do aumento ou diminuição gradual da opacidade desse elemento. Esse é um efeito chamado de fading.

$(document).ready(function () {
  $("#btnFadeOut").click(function () {
    $("p").fadeOut();
  });

  $("#btnFadeIn").click(function () {
    $("p").fadeIn();
  });
});

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

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

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

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

$(document).ready(function () {
  $("#btnFade").click(function () {
    $("p").fadeToggle();
  });
});

Contamos também com o método fadeTo(), que funciona de maneira similar aos métodos fadeIn() e fadeOut(), porém permite definir a opacidade/transparência que o elemento HTML irá atingir. A opacidade é definida no segundo parâmetro, logo após a velocidade da animação. Uma opacidade de 1 representa 100%, ou seja, o elemento totalmente opaco. Uma opacidade de 0 representa 0%, ou seja, totalmente transparente. Qualquer valor entre 0 e 1 terá uma transparência intermediária. Por exemplo:

$(document).ready(function () {
  $("button").click(function () {
    $("#div1").fadeTo("slow", 0.1);
    $("#div2").fadeTo("slow", 0.4);
    $("#div3").fadeTo("slow", 0.75);
  });
});