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");
}

customFadeInが実行された後にのみcustomFadeOutを実行したいので、これで呼び出します

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するリスナーを設定します。最後にメソッドを明示的に呼び出す必要はありません。jQueryはホワイトマジックを適用して、そのノードを内部でpromiseにリンクします。.promise()

デモ： http： //jsfiddle.net/RGgr3/

私はすべてを正しく行ったようです;）

于 2012-08-15T09:56:50.447 に答える