Línea de Código
Aprende a Programar

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().

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

Ahora ponemos los enlaces para ocultar y mostrar:

Ocultar | Mostrar

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
});

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();		
});

Si queremos podemos configurar el tiempo en el cual realizamos el efecto del face. 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.

Publicaciones relacionadas:

Usando cookies con jQuery Efecto leer más texto con jQuery Efecto leer más texto simplificado con jQuery Efecto slide con jQuery Animar elementos con jQuery