等待 for 循环中的 animation 完成

Question

我想使用 for 循环为一些对象设置动画。 代码如下所示：

for (var i = 0; i < 5; i++) {
    $('.el-' + i).animate({
        // code
    }, 5000);
}

如何使 for 循环等待动画完成？ 那可能吗？ 一次只能为一个元素设置动画。

Answer 1

正如@AlainDoe 所提到的，您可以使用完整的回调来触发下一个 animation，就像这样。

const animateFunc = (i) => {
  $(".el-" + i).animate({ // code }, 5000, "swing", () => {
    if (i < 5) {
      animateFunc(i + 1);
    }
  });
};

// start the first animation
animateFunc(0);

Answer 2

将回调用作递归 function。

 const count = 5; function oneAtATime(i) { $('.el-'+ i).animate({ opacity: 'toggle' }, 1000, ()=>{if(i < count) oneAtATime(i+1)}); } oneAtATime(0);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="el-0">Zero</div> <div class="el-1">One</div> <div class="el-2">Two</div> <div class="el-3">Three</div> <div class="el-4">Four</div>