1

私が欲しいのは、クラスを追加することによって、ページの読み込み時にサイドバーボックスを次々にフェードインすることです。

私は以下を試しました：

var a = $(".sidebar-box"), delayTime = 2000;

for(var i = 0; i < a.length; i++) {
    setTimeout(function(
        var ai = $(a[i]);
        ai.addClass("fade in");
        console.log(ai);
    ), delayTime);

    console.log(delayTime);
    delayTime += 2000;
}

問題は、クラスが最初に追加されるときまでに、iすでにで4あるため、クラスは最後のボックスにのみ追加されますが、実際には最初のボックスに追加する必要があります。

4

2 に答える 2

1

クラスを追加してCSSを介してアニメーション化する代わりに、jQueryのfadeIn()メソッドを使用しても問題がない場合は、次のようにすることができます。

var a = $(".sidebar-box"), delayTime = 2000, i = 0;

function animateSideBar() {
    if(i >= a.length) return;

    // call fadeIn, and pass this function itself as the completion callback
    $(a[i]).fadeIn(delayTime, animateSideBar);

    i++;
}

animateSideBar(); // start it
于 2012-11-04T17:00:04.073 に答える
1

i変数が毎回コピーされるように、個別の関数を作成する必要があります。

var a = $(".sidebar-box"), delayTime = 2000;

var func = function(i)
{
    setTimeout(function() {
        var ai = $(a[i]);
        ai.addClass("fade in");
    }, delayTime);
}

for(var i = 0; i < a.length; i++) {
    func(i);
    delayTime += 2000;
}
于 2012-11-04T16:55:39.373 に答える