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条件，甚至尝试设置超时等于动画的持续时间，但所有似乎是异步射击。什么是动画这些动画的最佳方式，并在完成后回复某些内容？

.transition()插件上的

Here's the info。

Answer 1

未使用您的代码进行测试（我不熟悉.transition），但请尝试以下操作：

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

$ .each动画后回调

1 个答案: