Question

So I’m running some animations to bring in some divs in my first jQuery plugin:

$.fn.turnstile = function (options, callback) {

if (!this.length) {
    return this;
}
count = this.length;
var opts = $.extend(true, {}, $.fn.turnstile.defaults, options)
var delayIt = 100;
if (opts.direction == "in") {
    opts.deg = '0deg';
    opts.trans = '0,0';
    opts.opacity = 1;
} else if (opts.direction == "out") {
    opts.deg = '-90deg';
    opts.trans = "-100px, 200px";
    opts.opacity = 0;
} else if (opts.direction == "back") {
    opts.deg = '0deg';
    opts.trans = '-2000px,0px';
    opts.opacity = 0;
} else {
    opts.deg = direction;
}
this.each(function (index) {
    delayIt += opts.delayer;
    $(this).show().delay(delayIt).transition({
        perspective: '0px',
        rotateY: opts.deg,
        opacity: opts.opacity,
        translate: opts.trans
    }, 400, 'cubic-bezier(0.33,0.66,0.66,1)', function () {
        if (opts.direction == "back" || opts.direction == "out") {
            $(this).hide();
        }
        if (!--count && callback && typeof (callback) === "function") {
            if ($(":animated").length === 0) {
                callback.call(this);
            }
        }
    });
});
return this;
};

Now, I’d like to call my callback when all animations are completed, which should mathematically be (delayIt+400)*count – but I can’t get the callback to run when all of the animations are complete. As you might be able to tell from its current state, I’ve attempted to check for :animated, used the !--count condition, and even tried setting a timeout equal to the duration of the animations, but all seem to fire asynchronously. What is the best way to animate these and call something back when done?

Here’s the info on the .transition() plugin.

Answer 1

Not tested with your code (i’m not familiar with .transition), but try this:

    ...
    this.promise().done(function(){
        alert('all done');
    });
    return this;
};