Javascript 李法丹一个接一个

我有一些项目的列表，我想要一个一个的fadeIn元素，意思是如果第一个元素完成fadeIn，然后下一个元素完成fadeIn，依此类推，在我给定的代码中，我不知道出了什么问题，请帮助我

HTML

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

---

jsIDLE:

您可以这样解决它：

$('#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

---

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

delay

：

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

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

这将使用完成回调以迭代方式淡入列表中的下一项

---

请用小提琴试一试我的小提琴找零看看

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

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