等待 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>