Efecto Fading con jQuery

Efecto Fading con jQuery

Hoy en dia podemos ver por la red muchos sitios que usan diferentes scripts y lenguajes para crear efectos en su sitio. Algo de lo mas usado ultimamente, o por lo menos asi lo veo yo es jQuery, y yo pienso que esto se debe a la facilidad para crear diferentes cosas y la rapidez con que se ejecuta.

En esta ocación les traigo este script que sirve para darle un efecto de desvanecimiento a una imagene que nosotros queramos, por ejemplo nuesto icono rss.

Para esto debemos de tener un par de imagenes (como ejemplo la imagen que se muestra en el post). Yo utilize un imagen .png de un rss, una fue la original y la otra la converti a grises con ayuda de photoshop(Imagen->Modo->Escala de Grises).

Ya una vez que tengas las imagenes vamos con el codigo que es realmente sencillo.

Empezamos con el codigo CSS:

PLAIN TEXT
CSS:
  1. body{
  2.     background:#000;
  3.     background-image: url(dinpattern-stripe.gif);
  4.     background-repeat: repeat;
  5. }
  6. #rss{
  7. width:150px;
  8. height:150px;
  9. margin:auto;
  10. position:center;
  11. display:block;}
  12. #rss a{
  13.     background-image:url(Feed2.png);
  14.     background-repeat: no-repeat;
  15.     position:center;
  16. display:block;
  17. width:150px;
  18. height:150px;
  19. }
  20.  #rss span.hover{
  21.  width:150px;
  22. height:150px;
  23.  background-image:url(Feed.png);
  24.     background-repeat: no-repeat;
  25.     position:center;
  26. display:block;}

Donde Feed2.png es la imagen a escala de grises y Feed.png es la imagen original

Ahora el HTML que es muy sencillo, solo una pequeña llamada a la clase:

PLAIN TEXT
HTML:
  1. <div id="rss">
  2. <a href="#" title="fancy light up RSS"></a></div>

Y por ultimo el codigo Javascript que ira entre las etiquetas Head y /Head:

PLAIN TEXT
JavaScript:
  1. $(function () { 
  2.   $('#rss a')   
  3.  
  4.     .append('<span class="hover" id="rsscolor"/>').each(function () {
  5.      
  6.       var $span = $('> span.hover', this).css('opacity', 0);
  7.      
  8.       $(this).hover(function () {
  9.  
  10.         $span.stop().fadeTo(800, 1);
  11.       }, function () {   
  12.  
  13.         $span.stop().fadeTo(800, 0);
  14.       });
  15.     });
  16. });

Nota: No te olvides de hacer el llamado al archivo jquery-1.3.2.js, de lo contrario no funcionara.(Entre Head y /Head tambien)

PLAIN TEXT
JavaScript:
  1. <script src="js/jquery-1.3.2.js" type="text/javascript"></script>

Demo

Descargar Archivos