Question

是否有任何可能的解决方案，一个接一个地 fadeIn（500）多个列表元素？

<ul id="list">
 <li>test</li>
 <li>test</li>
 <li>test</li>
 <li>test</li>
 <li>test</li>
</ul>

亲切的问候，沃纳

Answer 1

你可以做一个递归函数，当没有像这样的LI离开时停止：

function fadeLI(elem) { 
  elem.fadeIn(500, function() { fadeLI($(this).next()); }); 
}                            
fadeLI($("#list li:first"));

Check it out here

Answer 2

你想要一个递归函数来检查是否有另一个li元素，如果是这样就淡入它...

function fadeInNext(el){
  if(el.next('li')){
    el.next('li').fadeIn(500,fadeInNext)
  }
}
$('...').fadeIn( 500, fadeInNext )

Answer 3

你可以这样做..将每个孩子添加到一个数组中创建一个函数，看看数组的长度是否大于0，然后它得到数组的第一个项目和fadeToggle的子项，然后在fadeToggle中切换一个函数并跳转到下一个子元素..有关shift（）的更多信息，请查看http://www.w3schools.com/jsref/jsref_shift.asp

var toggleList = [];
$("#container").children().each(function() {
toggleList.push(this);
});

function fadeToggleList(toggleList) {
if (toggleList.length > 0) {
    var currentChild = toggleList.shift();
    $(currentChild).fadeToggle(50, function() {
        fadeToggleList(toggleList);
    });
}
}
fadeToggleList(toggleList);

Jquery：逐个淡化多个元素

3 个答案: