想在jQuery中无限次重复div的动画吗？ [英] Want to repeat animation on div for infinity times in jQuery?

问题描述

我想要什么

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

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

我尝试了什么

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

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>

推荐答案

您可以使用 .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>

我想从左到右，然后从右到左动画。

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

要在完成时反转动画，您可以使用 .queue（）， .delay（）， .promise（）， .then（）， .toArray（ ）， Array.prototype.reverse（）， .animate（）来制作动画不透明度元素。

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>

这篇关于想在jQuery中无限次重复div的动画吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！