2

这是我的代码片段。

    function customFadeIn () {
    $("img.imgKit").each(function(index) {
        $(this).delay(1000*index).fadeIn("slow");
    });
    console.log("one runs");
}

function customFadeOut () {
    $("img.imgKit").each(function(index) {
        $(this).delay(1000*index).not(document.getElementById('card-6')).fadeOut("slow" , function () {
            $("#card-6").delay(1000).rotate({angle:0});
        });
    });
    console.log("two runs");
}

我希望 customFadeOut 仅在 customFadeIn 完成后运行，因此我通过这个来调用它

customFadeIn();
customFadeOut();

但它没有用，我想我在这里做错了，帮助真的很有帮助。

4

1 回答 1

3

您可以使用 jQuerys Deferred/promise对象。动画也确实“继承”了这些对象，您可以申请jQuery.when()拍摄多个承诺来完成。

有几种方法可以为此重新构建代码，一个简单的实现可能如下所示：

(function() {
    var promises = [ ];

    function customFadeIn () {
        $("img.imgKit").each(function(index) {
             promises.push( $(this).delay(1000*index).fadeIn("slow").promise() );
        });
    }

    function customFadeOut () {
        jQuery.when.apply( null, promises ).done(function() {
            $("img.imgKit").each(function(index) {
                $(this).delay(1000*index).not(document.getElementById('card-6')).fadeOut("slow" , function () {
                    $("#card-6").delay(1000).rotate({angle:0});
                });
            });
            console.log("two runs");
        });
    }
}());

如果我在那里做的一切都是正确的，那么在它运行自己的代码之前，customFadeOut设置一个等待所有动画/承诺完成的监听器。您甚至不必在.promise()最后显式调用该方法，jQuery 应用了一些白魔法来将该节点与内部的 Promise 链接起来。

演示：http: //jsfiddle.net/RGgr3/

看起来我做的一切都是正确的；）

于 2012-08-15T09:56:50.447 回答