Javascript 如何按时间间隔循环浏览列表和fadeIn？

我有这样一个标准列表：

<ul>
<li style="display: none;">..</li>
<li style="display: none;">..</li>
<li style="display: none;">..</li>
</ul>

$('ul li').one('fader', function(e) {
    $(this).fadeIn(2000, function() {
        $(this).next().trigger('fader'); 
    });
}).first().trigger('fader'); 

我想一次一个地淡入每个元素。如何循环遍历每个元素并以2秒的间隔显示它？换句话说，当页面加载时，将显示第一个元素。。。2秒后，将显示第2个，然后再显示2秒，然后显示第3个，以此类推，直到全部完成

$('ul > li').each(function(i, elem) {
    window.setTimeout(function() {
        $(elem).fadeIn();
    }, i * 2000);
});

演示：

---

演示：

除了@ThiefMaster的方法外：

function fadeInSequence(li){
    var next = $(li).next('li')!=null?function(){fadeInSequence($(li).next('li'));}:function(){};
    $(li).fadeIn(2000,next);
}
fadeInSequence($('ul>li:first'));

（新手，无法正确格式化代码…）

---

演示：

除了@ThiefMaster的方法外：

function fadeInSequence(li){
    var next = $(li).next('li')!=null?function(){fadeInSequence($(li).next('li'));}:function(){};
    $(li).fadeIn(2000,next);
}
fadeInSequence($('ul>li:first'));

（新手，无法正确格式化代码…）

---

演示：

您可以尝试以下内容：

<ul>
<li style="display: none;">..</li>
<li style="display: none;">..</li>
<li style="display: none;">..</li>
</ul>

$('ul li').one('fader', function(e) {
    $(this).fadeIn(2000, function() {
        $(this).next().trigger('fader'); 
    });
}).first().trigger('fader'); 

---

示例：

您可以尝试以下方法：

<ul>
<li style="display: none;">..</li>
<li style="display: none;">..</li>
<li style="display: none;">..</li>
</ul>

$('ul li').one('fader', function(e) {
    $(this).fadeIn(2000, function() {
        $(this).next().trigger('fader'); 
    });
}).first().trigger('fader'); 

---

示例：

您可以使用jQuery内置方法

---

您可以使用jQuery内置方法

我的建议是：

var $list = $('ul li');

(function loop(current) {    
    current && $(current).fadeIn('slow', function() {
        loop($list.splice(0,1));
    });
}($list.splice(0,1)));

演示：

我的建议：

var $list = $('ul li');

(function loop(current) {    
    current && $(current).fadeIn('slow', function() {
        loop($list.splice(0,1));
    });
}($list.splice(0,1)));

演示：