1

所以我正在运行一些动画来在我的第一个 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()的信息。

4

1 回答 1

2

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

    ...
    this.promise().done(function(){
        alert('all done');
    });
    return this;
};
于 2012-06-19T18:33:23.980 回答