jQuery 在函数中的 promise with each()

Question

我正在尝试调用自己的函数并等待它完成。过渡结束后，我想开始下一个功能。 请看一下我的 jsfiddle http://jsfiddle.net/hrm6w/

console.log("upper finished") 应该在console.log("promise finished") 之后开始，所有动画都结束了。

在每个对象中的所有动画都结束后，我想开始下一个动作（函数）。

我认为promise() 函数是我所需要的，但我只是没有得到它的工作。

任何帮助将不胜感激。

Answer 1

玩了一会儿之后，您似乎需要从过渡中返回承诺。我稍微修改了一下，结果还是一样的。

这篇文章帮助解释了一些概念：http://hermanradtke.com/2011/05/12/managing-multiple-jquery-promises.html

演示：http://jsfiddle.net/lucuma/hrm6w/5/

    (function($) {
    //Transition Out
    $.fn.ajaxTransitionOut = function() {

        var $animators = $('.animate', this);
        $animators.each(function() {
            $(this).animate({
            left: 1000,
            opacity: 0
        }, 400);
        console.log('animating');
                        });
        return $animators.promise().done(function() {
            console.log('promise finished');
        });

    };

})(jQuery);

$(document).ready(function() {
    console.log('starting');
    $.when($('#content').ajaxTransitionOut()).done(function() {
        console.log('upper finished');
    });
    console.log('ending');

});​

Answer 2

我觉得就这么简单：

(function($) {
    $.fn.ajaxTransitionOut = function() {
        return this.find('.animate').each(function() {
            $(this).animate({
                left: 500,
                opacity: 0
            }, 4000);
        });
    };
})(jQuery);
$.when($('#content').ajaxTransitionOut()).done(function() {
    $('html').css('backgroundColor','#999');
});

小提琴 - http://jsfiddle.net/hrm6w/8/

您会看到我更改了常量和终端操作以更好地观察过程。

我承认我不完全理解为什么会这样，但似乎所有选定元素的复合承诺都隐含在插件返回的 jQuery 对象中（因此在方法链中可供.done() 使用）。

我希望这只会起作用，因为我们正在处理动画并且 Promise 的默认 type 是 'fx'（请参阅 documentation for .promise()）。

编辑：

您也可以删除.when() 并在方法链中使用.promise() 生成一个明确的承诺，如下所示：

$('#content').ajaxTransitionOut().promise().done(function() {
    $('html').css('backgroundColor','#999');
});

插件保持不变。