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

Question

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.

Each element in jQuery has its own animation queue. See http://stackoverflow.com/questions/505434/jquery-animation-queues-across-multiple-elements for how to tie a bunch of effects together. (So in your each function, you'd add each element to the alerts array.) — Conspicuous Compiler, Oct 25 '10 at 23:15

score 21 · Accepted Answer · edited Jul 08 '21 at 12:07

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 :

// http://www.jsfiddle.net/gaby/S5Cjm/
function InOut(elem) {
  elem.delay()
    .fadeIn()
    .delay()
    .fadeOut(
      function() {
        InOut(elem.next());
      }
    );
}

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

});

<!-- http://www.jsfiddle.net/gaby/S5Cjm/ -->


<ul id="content">
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
  <li>fifth</li>
  <li>sixth</li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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:

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

function InOut(elem) {
  elem.delay()
    .fadeIn()
    .delay()
    .fadeOut(
      function() {
        if (elem.next().length > 0) {
          InOut(elem.next());
        } else {
          InOut(elem.siblings(':first'));
        }

      }
    );
}

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

});

<!-- http://www.jsfiddle.net/gaby/S5Cjm/1/ -->

<ul id="content">
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
  <li>fifth</li>
  <li>sixth</li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

1 Answers1