使用jQuery .animate()实现变量动画时队列失效问题求助

嘿，我完全懂你的困扰——你用forEach循环创建的每个临时动画对象都是独立的，它们各自有自己的动画队列，所以默认会同时跑起来。要让它们按顺序一个个执行，我们可以用两种靠谱的思路来调整：

方法一：利用jQuery队列统一管理动画 #

我们可以把所有动画任务加到同一个全局队列（比如document的队列）里，只有当前动画完成后，才触发下一个任务。

function animate(varStore) {
  // 用document作为队列载体，保证所有动画共享同一个队列
  const $queue = $(document);
  
  varStore.position.forEach(position => {
    // 把每个动画包装成队列里的一个任务
    $queue.queue(function(next) {
      $({value: startingValue}).animate({value: position.x}, {
        duration: 5000,
        step: function() {
          variableToChange = this.value;
        },
        complete: function() {
          next(); // 当前动画完成后，执行队列里的下一个任务
        }
      });
    });
  });
  
  // 启动队列，开始执行第一个动画
  $queue.dequeue();
}

方法二：用递归替代forEach，手动控制执行顺序 #

这种方法更直观，不需要依赖额外队列，通过递归函数逐个启动下一个动画：

function animate(varStore) {
  const positions = varStore.position;
  let index = 0;
  // 如果需要动画连贯，这里可以把起始值设为上一个动画的结束值
  let currentValue = startingValue;

  function runNextAnimation() {
    // 所有动画执行完就退出递归
    if (index >= positions.length) return;
    
    const targetPosition = positions[index];
    $({value: currentValue}).animate({value: targetPosition.x}, {
      duration: 5000,
      step: function() {
        variableToChange = this.value;
        currentValue = this.value; // 更新当前值，让下一个动画从这里继续
      },
      complete: function() {
        index++;
        runNextAnimation(); // 当前动画完成后，启动下一个
      }
    });
  }

  // 启动第一个动画
  runNextAnimation();
}

额外提示 #

如果你的startingValue需要在每个动画间传递（比如第一个动画结束后，第二个动画从第一个的终点开始），递归方法里的currentValue更新就很有用，能让动画更连贯。

两种方法都能解决你“所有动画同时播放”的问题，递归方法更轻量，队列方法则适合需要在动画之间插入其他任务的复杂场景，你可以根据实际情况选择~

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