Rhecil Codes Rhecil Codes - 1 month ago 8
Javascript Question

Loop through sequential animations using $.each and setInterval?

I have a set of divs:

<div class="alert-container">
<div class="alert">alert 1 text</div>
<div class="alert">alert 2 text</div>
<div class="alert">alert 3 text</div>
</div>


I want to animate them one-by-one as follows:


  1. alert 1 slideInDown > wait 3s > alert 1 slideOutDown >

  2. alert 2 slideInDown > wait 3s > alert 2 slideOutDown >

  3. alert 3 slideInDown > wait 3s > alert 3 slideOutDown >

  4. repeat from [1]






The current state of my JS is as this:

$('.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();
});
});

});


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
.alert
divs, which is what I expect. Now I just need to modify this to animate one-by-one, and repeat infinitely.

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

Please help. Many thanks.

Answer

You may try below code:

$(document).ready(function(){

    var slideArray = $(".alert-container > .alert");
    var slideTime = 3000; //3 seconds
    var currentSlideIndex = 0;
    setInterval(function(){
        if(currentSlideIndex < slideArray.length){
            animateSlide(currentSlideIndex);
            currentSlideIndex++;
        }
        else
        {
            currentSlideIndex = 0;
            animateSlide(currentSlideIndex);
        }
    },slideTime);

    function animateSlide(slideIndex){
        var slideObject = slideArray[slideIndex]; //get the slide object to animate

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

Basically you can't directly use setInterval in $.each loop. So to avoid that approach you can animate one slide at a time by its index.

Note - I couldn't able to test above code. But I guess it should work.