如何在jQuery的.each()函数中循环调用.animate()方法

嘿，我明白你的问题了——那些小球只动了一次就停住了，对吧？这是因为你一开始只触发了一次animate()，没有设置循环机制让它们完成一次移动后立刻开始下一次随机位移。咱们来改改代码，让小球一直动起来：

核心问题分析 #

原代码里的动画逻辑只在初始化时执行了一遍，没有在每次动画结束后重新触发新的动画，所以小球跑完第一次就“歇菜”了。我们需要把动画逻辑封装成可重复调用的函数，并且在每次动画完成后递归调用这个函数，同时每次都生成新的随机位置和速度。

修改后的完整代码 #

// 随机颜色数组
var colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];
// 小球数量
var numBalls = 5;
// 容器元素
var container = $("#box");

// 创建小球并启动动画
for (var i = 0; i < numBalls; i++) {
  // 创建小球元素
  var ball = $("<div class='ball'></div>");
  // 初始化小球的随机颜色和初始位置
  ball.css({
    backgroundColor: colors[Math.floor(Math.random() * colors.length)],
    left: Math.random() * (container.width() - 50),
    top: Math.random() * (container.height() - 50)
  });
  // 把小球加到容器里
  container.append(ball);
  
  // 启动这个小球的循环动画
  animateBall(ball);
}

// 封装小球动画的函数
function animateBall(ball) {
  // 实时获取容器的宽高（避免容器大小变化时小球跑出边界）
  var containerWidth = container.width();
  var containerHeight = container.height();
  
  // 计算新的随机目标位置（确保小球不会跑出容器）
  var newLeft = Math.random() * (containerWidth - ball.width());
  var newTop = Math.random() * (containerHeight - ball.height());
  
  // 随机动画时长（1000-3000毫秒，让速度不一样）
  var moveSpeed = Math.random() * 2000 + 1000;
  
  // 执行动画，完成后递归调用自己实现循环
  ball.animate({
    left: newLeft,
    top: newTop
  }, moveSpeed, function() {
    // 动画结束后立刻启动下一次随机移动
    animateBall(ball);
  });
}

关键修改点说明 #

• 封装动画函数：把动画逻辑放到animateBall()里，方便重复调用。
• 递归触发循环：在animate()的完成回调里再次调用animateBall(ball)，这样小球每次移到目标位置后，会立刻计算新的位置开始下一次移动。
• 实时计算容器尺寸：每次动画前都重新获取容器的宽高，就算容器大小变了，小球也不会跑出边界。
• 随机速度：给每个动画设置1000-3000毫秒的随机时长，让小球移动速度各不相同，效果更自然。

这样改完之后，小球就会在容器里持续做随机位移啦～

内容的提问来源于stack exchange，提问作者Kevin Mamaqi