Feb 07 2009

6

Insights from Link Nudging

Category: Javascript, MootoolsTags: ,

Someone recently posted the question “Mootools link nudging?”. I honestly wasn’t familar with the term, at first I thought it was an SEO trick. I fired up google and quickly learned it was a css padding animation trick. I saw that David Walsh did a version in

jquery

$('a.nudge').hover(function() { //mouse in  
	$(this).animate({ paddingLeft: '20px' }, 400);  
}, function() { //mouse out  
	$(this).animate({ paddingLeft: 0 }, 400);  
});

and mootools.

$$('a.nudge').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 }); }  
	});  
});

I first noticed that the mootools code could be more “moo”.

‘$$’ returns an ‘Elements’ object. Elements acts like an array but extended with ‘$’ (’Element’). Mootools has the generic ’set’ function for setting a multitude of things on each element. The ’set’ properties can be customized or added by extending ‘Element.Properties’.

Continue reading “Insights from Link Nudging”

Tags: ,