Mouseover sobre botón con efecto fade y jQuery

Este tutorial básicamente se trata de animar un botón con efecto fade al pasar el ratón por encima utilizando,jQuery para la animación.

Lo que necesitamos para empezar es una imagen tal como se ve en la foto aquí arriba, donde estarán todos los botones en fila con el estado normal y en la fila de abajo, todos los botones con el efecto final.

Para ello, tengo hecha una imagen con todos los iconos a la vez (así ahorramos código y peso de carga en la web) de 265px de ancho por 96px de alto. Es decir, que si son 5 iconos, cada icono tendrá 53px de ancho por 48px de alto (por cierto, estos iconos se consiguen en iconspedia.com, menos el de G+).

Pues bien, la idea viene a ser lo siguiente, declararemos una función en javascript para que jQuery haga las animaciones (ver código 1), escribiremos nuestros enlaces, en este caso 5 (ver código 2) y mediante CSS, le diremos a jQuery cuál es la imagen base y cual es la final para que haga la animación.

Nota: el texto que ves en el SPAN en los enlaces, es muy importante y no se verá.

Lo importante está en adaptar tus posiciones de background en el css a la imagen que prepares. En mi caso, como cada icono tiene 53px de ancho, voy moviendo la posición -53px (es decir, hacia la izquierda) y -48px (hacia arriba) para que se vea el icono en color. Al ponerlo en 0 se verá el icono en blanco y negro.

Código JAVASCRIPT

<script type="text/javascript"> <!--
$(document).ready(function() {
$('.fade').hover(function() {$(this).children('span').fadeOut('250');},function() {$(this).children('span').fadeIn('250');})
});
//--></script>

Código XHTML

<div id="social">
<a href="#" title="" class="fade facebook" target="_blank"><span>facebook</span></a>
<a href="#" title="" class="fade googleplus" target="_blank"><span>googleplus</span></a>
<a href="#" title="" class="fade twitter" target="_blank"><span>twitter</span></a>
<a href="#" title="" class="fade linkedin" target="_blank"><span>linkedin</span></a>
<a href="#" title="" class="fade feedburner" target="_blank"><span>feedburner</span></a>
</div>

Código CSS

#social{float:right;display:inline;margin:20px 0 0 0} /* NO NECESARIO */
#social a,#social a span{width:53px;height:48px;display:block;border:0;margin:0 10px 0 0;text-decoration:none;float:left;text-indent: -1000em;background-image: url(/images/social.png);background-repeat: no-repeat;background-position: 0px 0px;}
#social a.facebook{background-position:0 -48px;}
#social a.facebook span{background-position:0px 0px;}
#social a.googleplus{background-position:-53px -48px;}
#social a.googleplus span{background-position:-53px 0px;}
#social a.twitter{background-position:-106px -48px;}
#social a.twitter span{background-position:-106px 0px;}
#social a.linkedin{background-position:-159px -48px;}
#social a.linkedin span{background-position:-159px 0px;}
#social a.feedburner {background-position:-212px -48px;}
#social a.feedburner span{background-position:-212px 0px;}

Posted in: Blogger, HTML5, JavaScript, jQuery, Wordpress