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
$('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’.