Efecto Fade en jQuery

30/mar/2012 jQuery , 5 Comentarios
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().

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

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

Ahora ponemos los enlaces para ocultar y mostrar:

  1. <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.

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

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

  1. $("#ocultar").click(function(e){
  2. $("#logo").fadeOut();
  3. });
  4. $("#mostrar").click(function(e){
  5. $("#logo").fadeIn();
  6. });

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

  1. $("#ocultar").click(function(e){
  2. $("#logo").fadeOut(2000);
  3. });
  4. $("#mostrar").click(function(e){
  5. $("#logo").fadeIn(2000);
  6. });

Algo sencillo realizar un efecto de fade en jQuery.

Vídeos sobre jQuery

Ningún video coincide

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

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. 😀
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

*


*