javascript - 如何使用Javascript(jQuery)按顺序淡入div？

我想要的是通过添加类在页面加载后彼此淡入淡出。

我尝试了以下方法：

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，因此，该类仅被添加到最后一个框，而实际上应该将其添加到第一个框。

最佳答案

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