Jquery: Fade plusieurs éléments l'un après l'autre

Question

est-il une solution possible, à fadeIn (500) éléments de liste multiples l'un après l'autre?

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

Cordialement, Werner

Answer 1

Vous pouvez faire une fonction récursive qui arrête quand il n'y a pas LI laissé comme ceci:

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

Check it out here

Answer 2

Vous voulez une fonction récursive vérifier s'il y a un autre élément li, et l'éteindre si c'est le cas ...

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

Answer 3

vous pouvez le faire .. ajouter chaque enfant dans un tableau et faire une fonction voir de si la longueur du tableau est supérieure à 0, alors il s'est le premier élément de l'enfant le tableau et fadeToggle qui à son tour est une bascule fonction au sein du fadeToggle et il saute à l'autre élément enfant .. pour plus d'informations sur le changement() consultez 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);