JQuery Fade In LI element disappear and linger (); next li fades out fades

Question

I have a list that I would like to stroke in each of the LIs with a delay between showing the next li. I feel that I should be able to just iterate over the list, but I don't get it in a loop. Something with an index?

$('#content li').hide();
$('#content li').each(function(n){
$(this).delay().fadeIn('li').delay().fadeOut();
//how to I start over in the LI again? keep looping?
}

Thanks for any thoughts, ideas and / or help! I appreciate it.

Answer 1

Some problems with your code

fadeIn can take as a parameter the duration, attenuation and callback function

So the walkthrough lidoes nothing ..

You can use the callback to start the animation of the next liline.

So

function InOut( elem )
{
 elem.delay()
     .fadeIn()
     .delay()
     .fadeOut( 
               function(){ InOut( elem.next() ); }
             );
}

and the first time just

$('#content li').hide();
InOut( $('#content li:first') );

http://www.jsfiddle.net/gaby/S5Cjm/

, , fadeOut

.fadeOut(
          function(){
             if(elem.next().length > 0) // if there is a next element
               {InOut( elem.next() );} // use it
             else
               {InOut( elem.siblings(':first'));} // if not, then use go back to the first sibling

           }
         );

http://www.jsfiddle.net/gaby/S5Cjm/1/