如何在.east()函数中循环jquery andimate()

Question

我试图让几个球在给定的div中随机位移。创建和样式的球几乎完全在jQuery中，并且它起作用，问题一直在尝试使.ainimate((循环一直在每次迭代中以随机的方向/速度移动。

第一步行之有效，但其余的行为不行。这是链接：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

您的答案在于语句：

第一步有效，但其余的

您只需要在某些间隔(例如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>