6

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

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

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

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

任何帮助，将不胜感激。

4

2 回答 2

3

玩了一会儿之后，您似乎需要从过渡中返回承诺。我对其进行了一些修改，但结果相同。

这篇文章帮助解释了一些概念：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');

});​
于 2012-06-13T01:05:40.123 回答
1

我认为这很简单：

(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'（请参阅.promise() 的文档）。

编辑：

您也可以像这样在方法链中删除.when()并生成显式承诺：.promise()

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

插件保持不变。

于 2012-06-13T01:53:19.877 回答