Как перебрать список и исчезнуть с временными интервалами?

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

В дополнение к подходу @ 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 3

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

Демо: http://jsfiddle.net/ThiefMaster/B94Fk/

Answer 4

Вы можете использовать встроенный jQuery задержка метод

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

Answer 5

Вы можете попробовать что-то вроде этого:

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

Пример: http://jsfiddle.net/redler/QNf29/1/