逐渐淡出

Question

我有一个项目的列表，我想逐个fadeIn元素，意味着如果第一个元素完成fadeIn然后下一个元素fadeIn等等，在我给定的代码中出了什么问题我不知道，请帮助我.. < / p>

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

修改

当你改变你的小提琴时，这是一个在悬停其他元素时有效的解决方案：

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

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

演示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