想在jQuery中无限次重复div的动画吗？

Question

我想要什么

我正在尝试使用jQuery中的fadeIn()/fadOut()函数创建动画，我完成了动画，但它只工作了一次，虽然我希望它重复多次

我尝试了什么

我尝试使用setInterval（）函数执行此操作两次，其中我使用totalDur变量添加了动画总时间的持续时间，并将其传递给父级setInterval函数

我在这做了什么，请检查一下

＆＃13;

＆＃13;

$(document).ready(function() {

  //this is for repeat again
  setInterval(function() {
   
    $('.box').each(function(index) {
      //this is for each box animation
      setInterval(function(eachshowdiv) {
        eachshowdiv.fadeIn();
      }, index * 800, $(this));
    
    });

  }, 2000);

});

＆＃13;

.wrapper {
  width: 1000px;
  margin: 0px auto;
}
.wrapper .box {
  height: 250px;
  width: 18%;
  margin-right: 2%;
  float: left;
  background: green;
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用.promise()，.fadeOut()，递归

$(document).ready(function() {

  function repeatAnimation() {
    var box = $(".box").fadeOut();
    box.each(function(index) {
      $(this).delay(index * 800).fadeIn();
    });
    box.promise().then(function() {
      setTimeout(repeatAnimation, 2000)
    })
  };
  repeatAnimation()
});

.wrapper {
  width: 1000px;
  margin: 0px auto;
}
.wrapper .box {
  height: 250px;
  width: 18%;
  margin-right: 2%;
  float: left;
  background: green;
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

</div>

  

我希望动画从左到右，然后从右到左。

要在完成时撤消动画，您可以使用.queue()，.delay()，.promise()，.then()，.toArray()，Array.prototype.reverse()，{{ 1}}动画.animate()元素。

opacity

$(document).ready(function() {

  function repeatAndReverseAnimation(boxes) {
    return $(boxes).queue("boxes", 
    $.map(boxes.box, function(box) {
      return function(next) {
        return $(box).animate({opacity: boxes.toggle[0]})
        .delay(boxes.delay[0]).promise().then(next)
      }
    })).dequeue("boxes").promise("boxes")
    .then(function() {
      this[0].toggle.reverse();
      this[0].box.reverse();
      return this.delay(this[0].delay[1], "boxes")
      .dequeue("boxes").promise("boxes")
      .then($.proxy(repeatAndReverseAnimation, null, this[0]));            
    });        
  };
  
  repeatAndReverseAnimation({
    box:$(".box").toArray()
    , toggle:[1, 0]
    , delay:[800, 2000]
  });
  
});

.wrapper {
  width: 1000px;
  margin: 0px auto;
}
.wrapper .box {
  height: 250px;
  width: 18%;
  margin-right: 2%;
  float: left;
  background: green;
  opacity: 0;
}

Answer 2

＆＃13;

＆＃13;

$(document).ready(function() {


  var boxLength = $(".box").length;

  // Execute this Method once a Cycle is Complete.
  setInterval(function() {

    $('.box').each(function(index) {
      var currentBox = $(this);
      //FadeIn only after the prior box is FadeIn Complete
      setTimeout(function() {
        currentBox.fadeIn();
        // number of boxed to be FadeIn before the fadeIn happens on the currentBox.
        
        //for 1 it takes sequence like (2,3,4,5,4,3,2) to be fadeIn again
        //boxLength - index * 2 and include the last element only Once
        var timeOut = 2 * (boxLength - index) - 2;
        
        //FadeOut just before FadeIn is executed on the prior box on either side.

        setTimeout(function() {
          currentBox.fadeOut();
        }, timeOut * 400);

      }, index * 400);
    })
  }, (2 * boxLength - 1) * 400);
});

＆＃13;

.wrapper {
  width: 1000px;
  margin: 0px auto;
}
.wrapper .box {
  height: 250px;
  width: 18%;
  margin-right: 2%;
  float: left;
  background: green;
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

</div>

＆＃13;

＆＃13;

＆＃13;