Search code examples
eventsmootoolschain

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

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

Solution

  • 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.