Efecto de movimiento lateral de un enlace con JQuery

Este efecto lo he aplicado a los enlaces situados al pie de página. Como veis al pasar el puntero del ratón sobre ellos estos se desplazan suavemente a la derecha, volviendo a su estado inicial al retirar el puntero del ratón.

Esto lo podríamos hacer facilmente con CSS haciendo:

1	a:hover { padding-right: 5px;}

pero el movimiento sería mucho más brusco ya que salta directamente los 5 pixels a la derecha. Para conseguir un movimiento suave vamos a utilizar JQuery y su comando animate. Como veremos, animate nos permite aplicar nuestros propios efectos de animación a un elemento o grupo de elementos. Este efecto lo ví por primera vez en el blog de Dave Walsh.

Pero empecemos por mostrar el código completo que iría en la cabecera (head) de nuestra web:

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
	$('.bloque_pie a').addClass('empujar');
	$('a.empujar').hover(function() { 
		$(this).animate({ paddingLeft: '5px' }, 200);
	}, function() { 
	        $(this).animate({ paddingLeft: 0 }, 200);
	});
    });
</script>

Vayamos ahora por partes, explicando línea a línea.

La primera de ellas símplemente carga JQuery, que lo podemos descargar desde su web oficial. Si lo tenemos en una carpeta de nuestra web lo podemos cargar directamente, como en el ejemplo. Hay autores que recomiendan que se cargue desde Google Code, ya que se gana en rapidez para el usuario de la web, en cuyo caso esa línea sería así:

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Vamos ahora con el código en sí:

1 2	<script type="text/javascript"> $(document).ready(function() {

Este comienzo es típico de JQuery y lo que dice es que una vez se haya cargado el DOM (Document Object Model) se ejecute la función que sigue a continuación. Merece la pena distinguir esto de la manera tradicional utilizada en Javascript:

1 2	<script type="text/javascript"> window.onload = function() {

Con window.onload lo que hacíamos es que la función no se iba a ejecutar hasta que no se cargara la web completa (no sólo el DOM), es decir, todas las imágenes y recursos externos. Esto implicaba que si había alguna imagen de carga muy lenta cualquier evento gestionado con Javascript no iba a funcionar hasta que no se cargara esa imagen. Este impedimento lo evitamos con el $(document).ready de JQuery.

Seguimos:

1	$('.bloque_pie a').addClass('empujar');

JQuery utiliza el signo $ para agrupar a una serie de selectores o elementos. Por ejemplo, el selector p a en CSS se referirá a todos los enlaces a que estén dentro de un elemento p. JQuery utiliza practicamente los mismos selectores. Para agrupar un conjunto de selectores utiliza $(selector) o también jQuery(selector).

Por ello, en el código anterior lo que hacemos es seleccionar todos los enlaces a que se encuentren dentro de un elemento con la clase bloque_pie y a estos elementos les aplica la clase “empujar”. Es decir, que hará lo siguiente:

<div class="bloque_pie">
    <a href="url_del_enlace" class="empujar" title="titulo">Inicio</a>
    <a href="url_del_enlace" class="empujar" title="titulo">Servicios</a>
    <a href="url_del_enlace" class="empujar" title="titulo">Trabajos</a>
    <a href="url_del_enlace" class="empujar" title="titulo">Blog</a>
    <a href="url_del_enlace" class="empujar" title="titulo">Contacto</a>
</div>

En general no es buena idea aplicar clases o id utilizando JQuery si estas clases o ids fueran importantes para el funcionamiento de la página, ya que si un usuario no tiene activado Javascript la página no funcionaría bien. Pero en este caso es apropiado porque se trata de un efecto símplemente visual que además sólo funciona si Javascript está activado.

Vamos con la siguiente línea:

$('a.empujar').hover(function() { 
   // instrucciones que se ejecutan al situar el ratón sobre el elemento seleccionado
}, function() { 
   // instrucciones que se ejecutan al retirar el ratón del elemento seleccionado
});

Como vemos, JQuery tiene un evento que se llama hover, de nuevo muy parecido al equivalente de CSS. Hover en JQuery permite dos funciones como parámetros, la primera incluirá las instrucciones que se ejecutarán al situar el ratón sobre el elemento seleccionado y la segunda incluirá las instrucciones a ejecutar cuando se retira el ratón.

Vamos a ver la primera función:

	$('a.empujar').hover(function() { 
		$(this).animate({ paddingLeft: '5px' }, 200);
	}, function() { 
	        // instrucciones que se ejecutan al retirar el ratón del elemento seleccionado
	});

Dentro de la función utilizamos $(this) que hace referencia al elemento que ha sufrido el hover, es decir el a.empujar concreto de entre todos ellos sobre el que se ha situado el ratón. Sobre este aplicamos animate(propiedades, duración), que aplica una animación al elemento seleccionado.

Como vemos en este ejemplo animate tiene dos parámetros (puede tener más, pero esta es su forma más sencilla):

propiedades – Especifica los valores finales que estilos soportados por CCS deberían tener al final de la animación. La animación tiene lugar ajustando estos valores de estilo desde sus valores iniciales hasta los especificados aquí.

duración – Especifica la duración de un efecto mediante un número que indica milisegundos. En su lugar también se puede usar slow (lento), normal o fast (rápido).

En el ejemplo de arriba lo que decimos es aplicar al a.empujar sobre el que está situado el ratón un padding-left de 5 pixels en una animación que llevará 200 milisegundos.

Vamos con la segunda parte del hover:

	$('a.empujar').hover(function() { 
		$(this).animate({ paddingLeft: '5px' }, 200);
	}, function() { 
	        $(this).animate({ paddingLeft: 0 }, 200);
	});
</script>

La segunda parte, que se ejecuta al retirar el ratón, hace que el elemento vuelva a tener un padding-left de 0px en una animación que durará 200 milisegundos.

¡Y eso es todo! Como veis el comando animate() de JQuery tiene muchas posibilidades.

Información adicional:

Blog de David Walsh
DevTips, donde realiza un plugin para JQuery para realizar el mismo efecto.
Sobre hover en la web oficial de JQuery.
Sobre animate en la web oficial de JQuery.