Link Nudging con Mootools y jQuery

0
21

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