Want to repeat animation on div for infinity times

问题:

What I want

I am trying to create animation using fadeIn()/fadOut() function in jQuery, I completed animation but It's working for one time only, although I want it to repeat for multiple times

What I tried

I tried to do this using setInterval() function twice time, where I added duration of total time of animation using totalDur variable, and passed it to parent level setInterval function

Here what I did, Please check this

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

});

.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>

回答1:

You can use .promise(), .fadeOut(), recursion

$(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>

---

i want to animation left to right then right to left .

To reverse the animation at completion you can use .queue(), .delay(), .promise(), .then(), .toArray(), Array.prototype.reverse(), .animate() to animate opacity of the elements.

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

<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>

回答2:

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

.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>