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.
<img id="logo" src="contenido.png" alt="logo">
Ahora ponemos los enlaces para ocultar y mostrar:
<a href="#" id="ocultar">Ocultar</a> | <a href="#" id="mostrar">Mostrar</a>
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.
