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>

我想按照以下方式逐个动画：

alert 1 slideInDown＆gt;等待3s＆gt; alert 1 slideOutDown＆gt;
alert 2 slideInDown＆gt;等待3s＆gt; alert 2 slideOutDown＆gt;
alert 3 slideInDown＆gt;等待3s＆gt; alert 3 slideOutDown＆gt;
从[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来实现我想要的结果，以及我是否应该使用{ {1}}变量基于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();
            });
        });
    }
})

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

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

Answer 2

如果有人想看到使用vijayP的答案实现的确切代码，请点击此处：

$(document).click("Divname", function (e) {
  alert(e.target.getAttribute('alt'));
});

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

2 个答案: