2010-03-30 78 views
2

是否有任何可能的解決方案,到fadeIn(500)多個列表元素一個接一個?jquery:逐個淡化多個元素

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

親切的問候, 沃納

回答

17

你可以做的是停止遞歸函數時沒有LI留下這樣的:

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

Check it out here

+0

+1,你是比我的:-) – 2010-03-30 15:36:24

0

你想要一個遞歸函數檢查是否有另外一個li元素,並且如果是這樣的話就淡入其中...

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

這不會工作..你沒有將下一個元素傳遞給'fadeInNext',無論是哪種情況,在jQuery中都不需要if(el.next('li'))......如果它沒有找到匹配的東西選擇器,它贏得了'運行。 – 2010-03-30 15:41:12

0

你可以做到這一點..添加的每個孩子進入陣列和 使該看到的,如果數組的長度大於0, 那麼得到的數組的第一個項目的功能和fadeToggle的孩子哪反過來切換是在fadeToggle內的功能,並跳轉到下一個子元素。有關轉移的更多信息()檢查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); 
+0

這不是最好的,但至少它的功能。 – 2015-03-14 08:07:17