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

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

2 个答案: