Mouseover sobre botón con efecto fade y jQuery

Escrito por: Martín el 26-08-2011 09:16:25 y leído 5104 veces

Este tutorial me lo ha pedido Diana desde Facebook y básicamente se trata de animar un botón con efecto fade al pasar el ratón por encima utilizando, desde ya, 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. El efecto a realizar será el que ves arriba de todo en mi web, en los iconos de las redes sociales.

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+ que lo hice yo).

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.

La DEMO? La tienes arriba de todo en los iconos de las redes sociales junto a mi nombre.

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;}

Categorías: Fade • Jquery • Mouseover •