如何使用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

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

Answer 2

如果您对使用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