Link nudging realiza un efecto de animación muy bueno para enlaces, cuando el mouse esta sobre el enlace, lo lanza a la derecha y cuando se quita el mouse regresa a su posición original.
Este ejemplo se realizara con dos librerías muy usadas, Mootools y jQuery.
Ejemplo con jQuery 1.2.6
Primero tienes que descargar esta versión de jQuery y colocarla en el head de tu pagina web, luego colocar este script también en el head.
$(document).ready(function()
{
$('a.nodo').hover(function()
{
$(this).animate({ paddingLeft: '20px' },400);
},
function()
{
$(this).animate({ paddingLeft: 0 }, 400);
});
});
Ejemplo con MooTools 1.2
Para este caso descargar Mootools 1.2 y colocarlo dentro del head de nuestra pagina web, el siguiente script al contrario con el de jQuery tendremos que colocarlo justo antes de cerrar la etiqueta body (</body>).
$$('a.nodo').each(
function(el)
{
var fx = new Fx.Morph(el,{ duration:300, link:'cancel' });
el.addEvents(
{
'mouseenter':function()
{ fx.start({ 'padding-left': 20 }); },
'mouseleave':function()
{ fx.start({ 'padding-left': 0 }); }
}
);
});
Recursos
