Question

这是我的代码段。

    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();

但是它不起作用，我觉得我在这里做错了，帮助会非常有帮助。

Answer 1

您可以使用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会设置一个监听器，等待所有动画 / promises 完成，然后再运行自己的代码。您甚至不必在最后显式调用.promise()方法，jQuery应用一些白魔法来为您在内部链接该节点。

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

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

功能之间的延迟

1 个答案: