Mouseover sobre botón con efecto fade y jQuery Blog de Martin Iglesias

Mouseover sobre botón con efecto fade y jQuery

Escrito por Martín Iglesias y leído 11,310 veces. Ver comentarios

26AGOSTO/2011

Categorías:
Fade
Jquery
Mouseover

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 1 - 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 2 - HTML

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

Acerca del Autor:

Diseñador web freelance en Coruña Galicia | Martin Iglesias

Martín Iglesias, diseñador web freelance de A Coruña, especializado en maquetación css y desarrollo de páginas web a medida con más de 15 años de experiencia en el desarrollo de páginas web profesionales.

Si te ha gustado este artículo, por favor, ayúdame a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Mouseover sobre botón con efecto fade y jQuery

Acerca del Autor:

Artículos relacionados: