fadeIn li один за другим

Question

У меня есть список некоторых элементов, я хочу, чтобы элемент fadeIn один за другим, означает, что если первый элемент завершен fadeIn, то следующий элемент fadeIn и т. Д., В моем коде, что происходит неправильно, я не знаю, пожалуйста помогите мне ..

HTML

<ul id="ulfade"><li>ABC</li><li>ABC</li><li>ABC</li><li>ABC</li></ul> 

JS

var i=0; 
$('#ulfade li:nth-child(' + i + ')').fadeIn(500, function() { 
    $('#ulfade li:nth-child(' + (++i) + ')').fadeIn('slow'); 
}); 

jsFiddle: http://jsfiddle.net/subhash9/suUHD/2/

Answer 1

Вы можете решить, как это:

$('#ulfade li').each(function(key, value) { 
    $(value).delay(key * 500).fadeIn(500); 
}); 

Demo

Try before buy

Редактировать

Как вы изменили свою скрипку, вот решение, которое работает, когда зависание некоторых другой элемент:

$('#divFade').mouseover(function() { 
    $('#ulfade li').each(function(key, value) { 
     $(value).delay(key * 500).fadeIn(500); 
    }); 

    $(this).unbind(); 
}); 

Demo 2

Try before buy

Answer 2

Вы также можете сделать это без использования delay, выполнив следующие действия:

$('#divFade').mouseover(function() { 
    var i = 0; 
    var list = $('#ulfade li'); 
    (function displayLI() { 
     list.eq(i++).fadeIn(500, displayLI); 
    })(); 

    $(this).unbind(); 
}); 

Это использует завершения обратного вызова итеративно затухают в следующем элементе в списке.

Demo