Mootools: how fired a function (or more functions) after the end of a tween or morph FX or other event?

Question

as title, I would to knoe how can I do to fired a function after the end of an event. Thanks!

Answer 1

the Fx classes all support several events:

onComplete

fires when the last animation is done.

element.set("tween", {
    onComplete: function() {
        this; // the Fx.Tween instance
        this.element; // the element that tweened
    }
}).tween("opacity", [0, 1]);

onStart

fires when an animation begins.

var myMorph = new Fx.Morph(element, {
    onStart: function() {
        this.element.addClass("disabled"); 
    }
});

myMorph.start({marginLeft: [-200, 0]});

onCancel

fires when you stop an animation.

also, Fx.Elements has a generic set of the same events that apply for all controlled animations.

have a look in the docs. http://mootools.net/docs/core/Fx/Fx.Morph for example - and the Fx docs. you can use any event or a combination of events.

you can also set link: "chain" or "cancel" or "ignore" etc for advanced control.