如何在.each（）函数

Question

我想让几个球在给定的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);
  });

Answer 1

你的答案在于声明：

  

第一步有效，但其余部分无效

你只需要在一定的时间间隔内重复移动逻辑，例如setInterval()或setTimeout()

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;