Question

Delaying effect and adding durration is pretty clear with Fx.Morph or Fx.Tween but how do I delay or add duration with method morph or tween ?

for example delay this by 3sec and set duration of 500

mouseleave: function() {
     el1.tween("margin-bottom","-280px");
     el.morph({'opacity': [0.2,1]});
}

any help is appreciated. Thank you!

EDITED: here is example http://jsfiddle.net/UungE/17/ the info has more lines because I am morphing another 4 elements inside info ( thus the try to shorten the code ) but I added just basics and I have it working just fine , but I want to achieve same result with info2 and less code. is it possible

Answer 1

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() {}