Mootools wait with Fx.Morph start

Question

I am trying to get var effect = new Fx.Morph(testMorph, { to wait/delay 2 seconds before starting.
(fiddle here)

But when I try .wait(2000) or .delay(2000), or even .wait(2000, effect) I get Uncaught TypeError: Object [object Object] has no method 'delay'

Any ideas how to get this working?

Code I'm using:

var testMorph = document.id('testMorph');
var effect = new Fx.Morph(testMorph, {
    transition: 'back:out',
    duration: 900,
    link: 'chain'
}).start({
    'top': 20,
    'opacity': 1
}).start({
    'border-color': '#A80025',
    'color': '#A80025'
});
effect.delay(2000);

Answer 1

You can use a combination of chain() and delay() to achieve the desired effect.

new Fx.Morph(testMorph, {
    transition: 'back:out',
    duration: 900,
    link: 'chain'
}).start().chain(function(){
    this.start.delay(2000,effect,{
        //first
    });
}).chain(function(){
    this.start({
        //second
    });
});

The chain() adds another effect at the end of the current one. The first effect is simply start() with an empty effect, to provide context to our chain of events.

It is then chained to the delayed event, using the start.delay() method (delay() is a property of Function).

This, in turn, is chained to your other effect.

See here.