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