Jquery: Fade multiple elements one after the other

Question

is there any possible solution, to fadeIn(500) multiple list elements one after the other?

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

Kind Regards, Werner

Answer 1

You could do a recursive function that stops when there's no LI left like this:

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

Check it out here

Answer 2

You want a recursive function to check if there is another li element, and fade it in if so...

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

Answer 3

you can do this.. add each child into a array and make a function which see's if the length of the array is greater then 0, then it get's the first item of the Array and fadeToggle's the child which in turn toggle's a function within the fadeToggle and it jumps to the next child element.. for more information about shift() check out 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);