Animar links con JQuery

Tweet

Desde el blog de David Walsh me llega esta interesante aplicación de la librería JQuery que nos permite animar cualquier link. Podéis ver el ejemplo en mi sitemap de Blogs de Ayuda y Blogs de Amigos o en su propia pagina.

Para implementarlo primero creamos la clase, antes de ]]></b:skin> ponemos

.efect{display: block;}

Despues, para los que ya usáis JQuery, solo debéis añadir antes de </head>

<script type='text/javascript'>
$(document).ready(function() {
$('.efect').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>

Los que no uséis JQuery deberéis bajaros este fichero, FICHERO y antes del código arriba indicado pegar

<script src="URL ALOJAMIENTO/jquery.min.js" type="text/javascript"/>

Para usarlo solo deberemos poner nuestros links entre un div con la clase efect

<div class="efect">
<a href="URL LINK 1">NOMBRE LINK 1</a>
<a href="URL LINK 2">NOMBRE LINK 2</a>
<a href="URL LINK 3">NOMBRE LINK 3</a>
</div>

Los que habéis implementado el sitemap solo debéis seguir este paso

Colocar antes de </head>

<script type='text/javascript'>
$(document).ready(function() {
$('.smbody p').hover(function() { //mouse in
$(this).animate({ paddingLeft: '40px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: '20px' }, 400);
});
});
</script>

Te recomendamos también

+ Artículos relacionados de Tutorial