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

Question

我试图让几个球在给定的 div 中随机移动。创建和设置球的样式的代码几乎完全在 jQuery 中并且它有效，问题是试图让 .animate() 一直循环，让球在 direction/speed 中随机移动每次迭代。

第一步有效，但其余的无效。这是link：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);
  });

Answer 1

你的答案就在声明中：

The first move works, but not the rest

你只需要将要重复的移动逻辑以一定的间隔放在重复函数中，如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>

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

How to loop jQuery animate() in .each() function

jquery

jquery-animate