javascript - 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);
});

演示

Try before buy

编辑

当你改变你的 fiddle 时，这里有一个在悬停其他元素时有效的解决方案:

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

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

演示 2

Try before buy