Loop through sequential animations using $.each and setInterval?
<p>I have a set of divs:</p>

<pre><code>&lt;div class="alert-container"&gt;
  &lt;div class="alert"&gt;alert 1 text&lt;/div&gt;
  &lt;div class="alert"&gt;alert 2 text&lt;/div&gt;
  &lt;div class="alert"&gt;alert 3 text&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I want to animate them one-by-one as follows:</p>

<ol>
<li>alert 1 slideInDown > wait 3s > alert 1 slideOutDown ></li>
<li>alert 2 slideInDown > wait 3s > alert 2 slideOutDown ></li>
<li>alert 3 slideInDown > wait 3s > alert 3 slideOutDown > </li>
<li>repeat from [1] </li>
</ol>

<hr>

<p>The current state of my JS is as this:</p>

<pre><code>$('.alert-container .alert').each(function(index) {

  $(this).addClass('animated slideInDown').show().one(animationEnd, function(){
    $(this).removeClass('animated slideInDown').addClass('animated slideOutDown').one(animationEnd, function(){
      $(this).removeClass('animated slideOutDown').hide();
    });
  });

});
</code></pre>

<p>I'm using animate.css, as can be seen by the classes being added, and this currently has the result of simultaneously animating all three <code>.alert</code> divs, which is what I expect. Now I just need to modify this to animate one-by-one, and repeat infinitely.</p>

<p>Even after reviewing other SO posts, I'm struggling to wrap my head around where to use <code>setInterval</code> and <code>$.each</code> in order to achieve the results I want, and whether I should be using an <code>initialDelay</code> variable based on <code>index</code> etc.</p>

<p>Please help. Many thanks. </p>