Geek Answers Handbook

Show and hide list items in sequence

I am trying to show and hide list items (which I cannot advise to a separate class) in a sequence, i.e. delay.

this is my html ...

<ul id="aclass"> <?php for ($i = 0; $i < count($enties); ++$i) : <li class="animation"> <div id="frame"> &nbsp; </div> </li> <?php endfor; ?> </ul>

still i

 $(document).ready(function() { function showpanel() { $("ul#aclass > li").each(function() { $(this).css("display", "none"); }); setTimeout(showpanel, 200) });

I want to see the first li element for two seconds, then replace, and the second for two seconds, then the next, etc. I do not know how to select the "next" li element and run the function for each element sequentially.

Thanks for the help.

+7
javascript jquery html css
source share
5 answers

Creative solution:

  • CSS: hide all panels except the first (using :first-child )
  • jQuery: periodically move the first child to the end.

 $(document).ready(function() { var panelInterval; panelInterval = setInterval(function () { $("ul#aclass > li:first-child").appendTo("ul#aclass"); }, 200) }); 
 ul#aclass > li { display: none; } ul#aclass > li:first-child { display: block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="aclass"> <li>Panel 1</li> <li>Panel 2</li> <li>Panel 3</li> <li>Panel 4</li> <li>Panel 5</li> </ul>
+5
source share

@tgifred As a result, I managed to find a working solution. This is true. Hope this helps.

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <ul id="aclass"> <li class="animate">Panel 1</li> <li class="animate">Panel 2</li> <li class="animate">Panel 3</li> <li class="animate">Panel 4</li> <li class="animate">Panel 5</li> </ul> <script> $(function() { var elements = $("ul#aclass li"); elements.hide(); elements.each(function (i) { $(this).delay(2000* i++).fadeIn(2000); }); }); </script> </body> </html>

If you want to have only one element visible at a time, you can do something like this:

 <script> $(function() { var elements = $("ul#aclass li"); elements.hide(); elements.each(function (i) { $(this).delay(2000 * i++).fadeIn(20).fadeOut(1800); }); }); </script>

And you can play with easing.

+2
source share

You can use a recursive function with a variable that increments for each run, something like

 $(document).ready(function() { (function showpanel(i, elems) { i = i === elems.length-1 ? 0 : i+1; elems.eq(i).show(0).delay(1000).hide(0, function() { showpanel(i, elems); }); })(-1, $("ul#aclass > li")); });

Fiddle

+1
source share

Try using $ .next ().

 $(document).ready(function() { function showpanel($toShow, $toHide) { if ($toHide) { $toHide.hide(); } $toShow.show(); setTimeout(showpanel, 200, $toShow.next(), $toShow) }); showpanel($("ul#aclass > li").hide().first()) });
+1
source share

check:

 function showpanel(current, elems) { return function() { current = current < elems.length - 1 ? current + 1 : 0; elems.hide().eq(current).show(); } }; setInterval(showpanel(0, $("#aclass li")), 200)

Demo

0
source share

More articles:


All Articles