jQuery Fade In LI item, fade out and delay(); next LI, fade in, fade out...

Question

Hi all,

I have a list that I would like to have fade in and out through each of the LI with a delay between showing the next li. I feel like I should be able to just iterate through the List, but am not getting it to loop. Something with 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 issues with your code

fadeIn can take as parameters duration, easing and a callback function

So passing 'li' does not do anything ..

You can use the callback to initiate the animation of the next li in line ..

like so

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

and the first time just do

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

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

If you want the loop to go on forever then change the fadeOut with the callback to

.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

           }
         );

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