Question

我有一个像这样的标准清单：

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

我想一次淡出每个元素。如何循环浏览每个元素并以2秒的间隔显示它？换句话说，当页面加载时，显示第一个元素... 2秒后，显示第二个元素，然后再显示2秒，然后显示第三个元素，直到它们全部完成。

Answer 1

我的建议：

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

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

演示：http://www.jsfiddle.net/Ab8xW/

Answer 2

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

演示：http://jsfiddle.net/ThiefMaster/B94Fk/

Answer 3

除了@ ThiefMaster的方法：

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

（新人，无法正确格式化代码......）

演示：http://www.jsfiddle.net/bradchristie/zdqCz/

Answer 4

您可以尝试这样的事情：

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

示例：http://jsfiddle.net/redler/QNf29/1/

Answer 5

您可以使用delay方法

中内置的jQuery

$('ul > li').each(function(i, element) {
    $(element).delay(i * 2000).fadeIn();
});

如何循环列表和fadeIn与时间间隔？

5 个答案: