使用 $.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 slideInDown > 等待 3 秒 > 警报 1 slideOutDown >
警报 2 slideInDown > 等待 3 秒 > 警报 2 slideOutDown >
alert 3 slideInDown > wait 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 以获得我想要的结果，以及我是否应该使用基于 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。因此，为避免这种方法，您可以通过 index.

一次为一张幻灯片制作动画。

注意 - 我无法测试上面的代码。不过我想应该可以吧。

Answer 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);

});

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

Loop through sequential animations using $.each and setInterval?

javascript

jquery

each

setinterval

animate.css