添加CSS每0.3秒迭代所有项目(无限数量)

Question

我有一个页面，可以显示任意数量的项目(可以是1，也可以是50)。

此时，每个.job-item在负载上被设置为opacity:0;。

我想把这些项目中的每一个都改为opacity:1，每个项目之间间隔0.3秒。

我如何用jQuery做到这一点?我知道可以每0.3秒创建一个setInterval，如下所示:

setInterval(function(){
   alert("Hello");
}, 300);

但是我不知道如何使下面的行应用到每个元素。我也知道有.each()，但我不确定如何通过页面上的每个项目进行选择?每隔一段时间呢?

每0.3秒在每个项目上应用的代码将是:

$('.job-item').css('opacity','1');

所以我想我正在寻找帮助结合setInterval, .each()和我的.css()代码。

这是我到目前为止的代码。它使每个项目显示在0.3秒，而不是每个项目。我没有正确迭代:

$(document).ready(function(){
        setInterval(function(){
            $(".job-item").each(function() {
                $(this).css('opacity','1');
            });
        }, 300);
    });

Answer 1

可以递归地调用这个函数

var jobItem = $('.job-item').css('opacity', '0')
var len = jobItem.length;
animate(0)
function animate(index) {
    setTimeout(function () {
        jobItem.eq(index).css('opacity', '1');
        if (index < len) animate(++index) // call the function recursive
    }, 300)
}