Question

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

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

如何让 for 循环等待动画完成？那可能吗？一次只能对一个元素进行动画处理。

Answer 1

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

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

// start the first animation
animateFunc(0);

Answer 2

将回调用作递归函数。

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>

等待 for 循环中的动画完成

2 个答案: