Efecto Fade en jQuery

30/Mar/2012 jQuery , 5 Comentarios
programación jquery en español

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.

Vídeos sobre jQuery


5 comentarios en “Efecto Fade en jQuery”

Víctor Cuervo

m++

Hola, sabés como se puede lograr un efecto de fadeout sobre las imagenes que no tengo seleccionadas..para decirlo mas claro: necesito que al hacer rollover sobre una imagen, me baje la opacidad de una tira de imagenes, que van a estar en div contenedor..Desde ya, muchas gracias, si tienes algun tutorial o ejemplo de aplicacion para ese efecto..

Víctor Cuervo

Víctor Cuervo

@Mith,
Lo tienes en el botón de visualizar. :-D
La URL del ejemplo es http://lineadecodigo.com/wp-content/uploads/2012/03/efecto-fade.html

Espero que te guste.

Víctor Cuervo

Mith

Quizá lo único que le falta es un ejemplo en vivo ^^

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.