如何在 .each() 函数中循环 jQuery animate()答案

【问题标题】：How to loop jQuery animate() in .each() function如何在 .each() 函数中循环 jQuery animate()
【发布时间】：2018-04-02 09:39:43
【问题描述】：

我试图让几个球在给定的 div 中进行随机位移。用于创建球和设置球样式的代码几乎完全在 jQuery 中，并且它可以工作，问题是试图让 .animate() 一直循环，让球在每次迭代中以随机方向/速度移动。

第一步有效，但其余部分无效。这是链接：https://jsfiddle.net/xpvt214o/19871/

  // Some random colors
  var colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];
  var numBalls = 50;
  var balls = [];

  function makeNewPosition(){
    // Get viewport dimensions (remove the dimension of the div)
    var h = $('.front-bg').height();
    var w = $('.front-bg').width();
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    return [nh,nw];    
  }

  for (i = 0; i < numBalls; i++) { 
   $('.front-bg').append('<div class="ball"></div>');
   $('.ball').each(function(index, el) {
    $(this).css('backgroundColor', colors[Math.floor(Math.random() * colors.length)]);
    $(this).css('left', Math.floor(Math.random() * 100) + '%');
    $(this).css('top', Math.floor(Math.random() * 100) + '%');
    $(this).css('transform', 'scale(' + Math.random() + ')');
    var WH = Math.floor(Math.random() * 45) + 4;
    $(this).css({
      width:  WH + 'px',
      height: WH + 'px'
    });
  });
 }

  $('.ball').each(function() {
    var newq = makeNewPosition();
    $(this).animate({
    top: newq[0], 
    left: newq[1],
    easing: 'easeInOutQuint',
    complete: function() {
      $(this).animate({
      top: newq[0], 
      left: newq[1],
      easing: 'easeInOutQuint',
      }, Math.random() * 10000)
    }
    }, Math.random() * 10000);
  });

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

你的答案在于陈述：

第一步有效，其余无效

你只需要把要重复的移动逻辑按一定的间隔放在重复函数中，比如setInterval()，或者setTimeout()

  // Some random colors
  var colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];
  var numBalls = 50;
  var balls = [];

  function makeNewPosition(){
    // Get viewport dimensions (remove the dimension of the div)
    var h = $('.front-bg').height();
    var w = $('.front-bg').width();
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    return [nh,nw];    
  }

  for (i = 0; i < numBalls; i++) { 
   $('.front-bg').append('<div class="ball"></div>');
   $('.ball').each(function(index, el) {
    $(this).css('backgroundColor', colors[Math.floor(Math.random() * colors.length)]);
    $(this).css('left', Math.floor(Math.random() * 100) + '%');
    $(this).css('top', Math.floor(Math.random() * 100) + '%');
    $(this).css('transform', 'scale(' + Math.random() + ')');
    var WH = Math.floor(Math.random() * 45) + 4;
    $(this).css({
      width:  WH + 'px',
      height: WH + 'px'
    });
  });
 }

var first = true;
setInterval(function() {
  $('.ball').each(function() {
    var newq = makeNewPosition();
    $(this).animate({
    top: newq[0], 
    left: newq[1],
    easing: 'easeInOutQuint',
    complete: function() {
      $(this).animate({
      top: newq[0], 
      left: newq[1],
      easing: 'easeInOutQuint',
      }, Math.random() * 10000)
    }
    }, Math.random() * 10000);
  });
}, (first?0 : 3000));
first = false;

.ball {
  position: absolute;
  border-radius: 100%;
  opacity: 0.7;
}
.front-bg {
  min-height: 400px;
}
#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="front-bg"></div>

【讨论】：