Efecto Fade en jQuery

Utilizando jQuery podemos crear de una forma muy sencilla efectos de Fade, es decir, ocultar o mostrar un elemento de forma gradual. Para poder realizar un efecto de Fade en jQuery utilizaremos los métodos .FadeOut() y .FadeIn().

Crear la Imagen

Pero lo primero será poner un elemento sobre el que aplicar el efecto Fade. En nuestro caso utilizaremos una imagen.

<img id="logo" src="contenido.png" alt="logo">

Añadir los Enlaces

Ahora ponemos los enlaces para ocultar y mostrar:

<a href="#" id="ocultar">Ocultar</a> | <a href="#" id="mostrar">Mostrar</a>

Manejar el Evento Click

Lo que haremos ahora será poner el código jQuery que controle el evento onclick sobre estos enlaces. Para poder hacer esto necesitamos el método click sobre los enlaces.

$("#mostrar").click(function(e){
  // Efecto Fade
});

Ejecutar los Efectos Fade

Ya solo nos quedará el ejecutar los efecto con los métodos .FadeOut() y .FadeIn().

$("#ocultar").click(function(e){
  $("#logo").fadeOut();
});

$("#mostrar").click(function(e){
  $("#logo").fadeIn();
});

Configurar el Tiempo del Efecto

Si queremos, podemos configurar el tiempo en el cual realizamos el efecto del fade. Para ello pasaremos el tiempo, en milisegundos, a las funciones .FadeOut() y .FadeIn().

$("#ocultar").click(function(e){
  $("#logo").fadeOut(2000);
});

$("#mostrar").click(function(e){
  $("#logo").fadeIn(2000);
});

Algo sencillo: realizar un efecto de fade en jQuery.