javascript - 如何使用Javascript（jQuery）按顺序淡入div？

Question

我想要的是通过添加一个类在页面加载时淡入我的侧边栏框。

我尝试了以下方法：

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，所以类只添加到最后一个框，而实际上它应该添加到第一个框。

Answer 1

如果你可以使用 jQuery 的fadeIn()方法，而不是通过 CSS 添加一个类和动画，你可以像这样：

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

Answer 2

您需要创建一个单独的函数，以便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;
}