javascript - 使用 $.each 和 setInterval 循环播放连续动画？

Question

我有一组 div:

<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>

我想将它们一一制作动画，如下所示:

1. 警报 1 SlideInDown > 等待 3 秒 > 警报 1 SlideOutDown >
2. 警报 2 SlideInDown > 等待 3 秒 > 警报 2 SlideOutDown >
3. 警报 3 SlideInDown > 等待 3 秒 > 警报 3 SlideOutDown >
4. 重复[1]

<小时/>

我的JS当前状态是这样的:

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

});

我正在使用 animate.css，从添加的类可以看出，当前的结果是同时对所有三个 .alert div 进行动画处理，这正是我所期望的。现在我只需要修改它来逐一制作动画，并无限重复。

即使在查看了其他 SO 帖子之后，我仍然在努力思考在哪里使用 setInterval 和 $.each 才能达到我想要的结果，以及我是否应该使用基于 index 等的 initialDelay 变量。

请帮忙。非常感谢。

Answer 1

您可以尝试以下代码:

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

基本上你不能在$.each循环中直接使用setInterval。因此，为了避免这种方法，您可以通过其索引一次为一张幻灯片设置动画。

注意 - 我无法测试上面的代码。但我想它应该有效。