使用 $.each 和 setInterval 循环播放顺序动画？答案

【问题标题】：Loop through sequential animations using $.each and setInterval?使用 $.each 和 setInterval 循环播放顺序动画？
【发布时间】：2016-10-26 03:20:23
【问题描述】：

我有一组 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>

我想一个一个地为它们制作动画，如下所示：

alert 1 slideInDown > 等待 3s > alert 1 slideOutDown >
alert 2 slideInDown > 等待 3s > alert 2 slideOutDown >
alert 3 slideInDown > 等待 3s > alert 3 slideOutDown >
从 [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 以获得我想要的结果，以及我是否应该使用基于变量的 initialDelay在index 等上。

请帮忙。非常感谢。

【问题讨论】：

标签： javascript jquery each setinterval animate.css

【解决方案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。因此，为了避免这种方法，您可以通过 index 一次为一张幻灯片制作动画。

注意 - 我无法测试上面的代码。但我想它应该可以工作。

【讨论】：

谢谢，vijayP。这正是我所需要的。
再次感谢您的回答，vijayP - 它本质上是解决方案，我成功实现了我想要的，除了一个问题。循环在第 2 次和随后的遍历中遍历数组中的第一项。我不明白为什么：0 > 1 > 2 > 0 > 0 > 1 > 2 > 0 > 0 > 1 > 等等...你知道为什么会发生这种情况吗？循环对我来说看起来不错。我的代码如下。
忽略我之前的评论；在 if 语句的第二部分中，计数器 (count++) 上没有增量。

【解决方案2】：

如果有人想查看使用 vijayP 的答案实现的确切代码，这里是：

jQuery(document).ready(function($) {

  var alertArr = $(".alert-container .alert");
  var alertTime = 6500;
  var visibleAlert = 0;
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

  // loop through array of alerts

  function loopAlerts(){
    if(visibleAlert < alertArr.length ) {
      animateAlert(visibleAlert);
      visibleAlert++
    } else {
      visibleAlert = 0;
      animateAlert(visibleAlert);
      visibleAlert++
    }
  }

  // alert slideInDown > wait 3s > slideOutDown

  function animateAlert(visibleAlert){

    var alert = alertArr[visibleAlert];

    $(alert).addClass('slideInDown').removeClass('hide').one(animationEnd, function(){
      $('.minor-alerts .marquee .alert').removeClass('slideInDown slideOutDown');
      setTimeout(function(){
        $(alert).addClass('slideOutDown').one(animationEnd, function(){
          $(alert).addClass('hide').removeClass('slideOutDown slideInDown');
        });
      }, 3000);
    });
  }

  setInterval(loopAlerts, alertTime);

});

【讨论】：

好消息@Rhecil...！