Javascript 使用$.each和setInterval循环顺序动画？

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

我使用的是animate.css，正如所添加的类所示，这目前的结果是同时为所有三个

.alert

div设置动画，这正是我所期望的。现在我只需要修改它，一个接一个地设置动画，然后无限重复

即使在阅读了其他SO帖子之后，我仍在绞尽脑汁想在哪里使用

setInterval

和

$。每个
都是为了达到我想要的结果，以及我是否应该使用基于
索引的
initialDelay
变量

请帮忙。非常感谢
 您可以尝试以下代码：

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

$（文档）.ready（函数（）{
var slideArray=$（“.alert container>.alert”）；
var slideTime=3000；//3秒
var currentSlideIndex=0；
setInterval（函数（）{
如果（currentSlideIndex

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

注意-我无法测试上述代码。但是我想它应该会起作用。
如果有人想看到使用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);

});

jQuery（文档）.ready（函数（$）{
var alertArr=$（“.alert container.alert”）；
var-alertTime=6500；
var visibleAlert=0；
var animationEnd='webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationEnd'；
//循环浏览警报阵列
函数loopAlerts（）{
if（可视警报等待3s>滑出
函数animateAlert（visibleAlert）{
var alert=alertArr[visibleAlert]；
$（警报）.addClass（'slideInDown'）.removeClass（'hide'）.one（animationEnd，function（）{
$（'.minor alerts.marquee.alerts'）.removeClass（'slideInDown slideOutDown'）；
setTimeout（函数（）{
$（警报）.addClass（'slideOutDown'）.one（animationEnd，function（）{
$（警报）.addClass（'hide'）.removeClass（'slideOutDown slideInDown'）；
});
}, 3000);
});
}
设置间隔（循环警报、警报时间）；
});
谢谢，vijayP。这就是我所需要的。再次感谢你的回答，vijayP-这基本上就是解决方案，我成功地实现了我想要的，除了一个问题。循环在数组中的第一个项目上迭代两次，在第二个和后续的播放过程中。我不明白为什么：0>1>2>0>0>1>2>0>0>0>1>等等。。。你能明白为什么会这样吗？我觉得这个环不错。下面是我的代码。忽略我以前的评论；if语句的第二部分中的计数器（count++）没有增量。Good catch@Rhecil。。。！
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);

});