Question

As per my previous question, I have a working animation which fades in and out each element within the div slideshow. The problem is that I want this animation to continue from the beginning once it has reached the last element. I figured that was easy and that I’d just place an infinite loop inside my JQuery function, but for some reason if I insert an infinite loop, no animation displays and the page hangs. I also cannot find anything in the documentation about how properly place a callback. How can I get this code to restart from the beginning of the animation once it finishes iterating over each object and why is an infinite loop not the right way to go about this?

<div id="slideshow">
    <p>Text1</p>
    <p>Text2</p>
    <p>Test3</p>
    <p>Text4</p>
</div>

<script>
$(document).ready(function() {

var delay = 0;
$('#slideshow p').each(
    function (index, item)
    {
        $(this).delay(delay).fadeIn('slow').delay(800).fadeOut('slow');
        delay += 2200;
    }
);

});
</script>

Answer 1

You could do something like this:

$(function() {
  var d = 2200;
  function loopMe() {
    var c = $('#slideshow p').each(function (i) {
              $(this).delay(d*i).fadeIn('slow').delay(800).fadeOut('slow');
            }).length;
    setTimeout(loopMe, c * d);
  }
  loopMe();
});

You can give it a try here.

Instead of keeping up with a delay, you can just multiple it by the current index in the loop…since the first index is 0, the first one won’t be delayed at all, then 2200ms times the amount of elements later, do the loop again. In the above code d is the delay, so it’s easily adjustable, and c is the count of elements.