1

jQueryで要素を順番にフェードするのに役立つユーティリティメソッドを作成しています。以下のコードでわかるように、追加のクラスをalreadyFadedInフラグとして追加しています。メソッド呼び出しの最後に、メソッド内の選択した要素に追加したフラグ クラスを削除する場所をsequentiallyFadeIn(...)実行したいと思います。cleanUpsequentiallyFadeIn(...)

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    function sequentialFadeIn(selectorText, speed, display, callBack) {

        display = typeof display !== 'undefined' ? display : "block";

        function helper() {
            nextElementToFadeIn = $(selectorText).not(".alreadyFadedIn").first();
            nextElementToFadeIn.fadeIn(speed, function() {
                $(this).addClass("alreadyFadedIn");
                helper();
            }).css("display", display);
        }
        helper();

        callBack(selectorText);      
    }
    sequentialFadeIn(".toBeFaddedIn", "slow", "inline-block",function cleanUp(selectorText1){
            $(selectorText1).removeClass("alreadyFadedIn");
            console.log("Clean up has been performed.");
                    console.log("Selector Text: " +selectorText1);

        } );

});

</script>

</head>
<body><style media="screen" type="text/css">
.hello {
    background-color: blue;
    height:50px;
    width: 50px;
    display: none;

}
</style>

<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>

</body></html>

alreadyFadedIninspect 要素を見ていると、クラスが削除されていないことに気付きました。原因は、 cleanUp メソッドが にあるsequentiallyFadeInメソッドのメインロジックと一緒に非同期的に実行されることhelper()です。「クリーンアップが実行されました」というログ メッセージも確認できます。div のフェードインが完了する前でも印刷されます。

メソッドcleanUpのメイン ロジックの完了後に呼び出しを実行するにはどうすればよいですか? sequentiallyFadedIn助言がありますか？

jsfiddle のコード: http://jsfiddle.net/BztLx/11/

4

3 に答える 3

4

フェードインする要素が残っているかどうかを確認する必要があります。要素が残っていない場合は、クリーンアップ コールバックを呼び出します。これが私がそれを実装した方法です：

    if ($(selectorText).is(":not(.alreadyFadedIn)")) {

        //Your main logic
        nextElementToFadeIn = $(selectorText).not(".alreadyFadedIn").first();
        nextElementToFadeIn.fadeIn(speed, function() {
            $(this).addClass("alreadyFadedIn");
            helper();
        }).css("display", display);

    } else {

        //No elements remain, cleanup time
        callBack(selectorText);
    }

外側の条件では、フェードインしていない要素が少なくとも 1 つあるかどうかを確認し、そうでない場合はコールバックを呼び出します。

デモンストレーション: http://jsfiddle.net/BztLx/12/

于 2012-11-24T17:25:27.937 に答える
3

次のようにコードを書き直すだけで、より簡単に、よりクリーンに、より速く...

$(document).ready(function() {

    function sequentialFadeIn(selectorText, speed, display, callBack) {

        display = display || "block";

        var els = $(selectorText),
              i = 0;

        (function helper() {
            els.eq(i++).fadeIn(speed, helper).css("display", display);
            if (callback && i === els.length)
                callback(selectorText); // Not really needed any more
        })();
    }

    sequentialFadeIn(".toBeFaddedIn", "slow", "inline-block", function cleanUp(selectorText1){
        // not really needed any more
       //  $(selectorText1).removeClass("alreadyFadedIn");
    });
});

デモ: http://jsfiddle.net/BztLx/15/

必要以上の DOM 選択を行っていました。

于 2012-11-24T17:52:48.227 に答える
2

私のコメントを拡張するために、追加のクラスを使用しない簡略化されたバージョンを次に示します。

function fadeThenNext(element){
    element.fadeIn("fast", function() {
        element=element.next(".toBeFaddedIn");
        if (element.length) fadeThenNext(element);
    });
}
fadeThenNext($(".toBeFaddedIn").first());

デモ： http： //jsfiddle.net/BztLx/17/

[更新]要素が兄弟でない場合のより一般的なバージョン：

function fadeSequence(elements){
    elements.first().fadeIn("fast", function() {
        fadeSequence(elements.slice(1));
    });
}
fadeSequence($(".toBeFaddedIn"));

フィドル： http： //jsfiddle.net/BztLx/22/

于 2012-11-24T18:11:15.977 に答える