javascript - 一一淡入

Question

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

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

演示

先试后买

编辑

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

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

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

演示 2

先试后买

Answer 2

您也可以delay通过执行以下操作而不使用它：

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

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

这使用完成回调迭代地淡入列表中的下一项。

演示