$.each 后的回调，带有动画

Question

所以我正在运行一些动画来在我的第一个 jQuery 插件中引入一些 div：

$.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;
};

现在，我想在所有动画完成后调用我的回调，在数学上应该是 (delayIt+400)*count - 但我无法在所有动画完成后运行回调。正如您可能能够从其当前状态中看出的那样，我尝试检查:animated，使用!--count 条件，甚至尝试将超时设置为等于动画的持续时间，但似乎都是异步触发的.为这些设置动画并在完成后调用某些内容的最佳方式是什么？

Here's the info 在.transition() 插件上。

Answer 1

没有用你的代码测试过（我不熟悉.transition），但是试试这个：

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