this is a two part question.
part 1
special acessors for class instances that have an element prototype are available for mootools classes like fx.tween/morph as well as request, validator etc.
el.set('tween', {
duration: 500
}).tween(something);
set will either create an instance of Fx.Tween if none found - or setOptions()
your new options into the existing instance.
same applies to .get
only it can return the actual Fx.something instance:
var instance = el.get('morph', { duration: 600 });
instance.start({marginBottom:[0,-280]});
see what the custom set/get really do here: https://github.com/mootools/mootools-core/blob/master/Source/Fx/Fx.Tween.js#L45-61
very useful for classes that are related to a single dom element as a pattern.
part 2
adding a delay is going to be simple.
mouseleave: function() {
clearTimeout(this.retrieve('handle')); // reset.
this.store('handle' (function() {
el1.tween(); ....
}).delay(3000));
}
in case they leave and come back in the 3 secs, it will reset the timer.
tidy up example with your fiddle:
$$('.info').each(function(el) {
el.set('morph', {
duration: 300,
'link': 'cancel'
}).addEvents({
mouseenter: function() {
clearTimeout(this.retrieve('handle'));
this.morph({
'margin-left': 70
});
},
mouseleave: function() {
this.store('handle', (function() {
this.morph({
marginLeft: 0
});
}).delay(500, this));
}
});
});
if you want less code in the setup, you can use something like this delay pseudo hook i wrote for hoverIntent - but also for any delayed event, really:
http://jsfiddle.net/dimitar/xAJ5f/
you can then do: mouseleave:delay(500): function() {}