jquery .animate(） 在循环中使用索引 complete: .

jquery .animate() in a loop using the index on complete:

本文关键字：索引 complete 循环 animate jquery      更新时间：2023-09-26

我正在开发一个同时运行多个动画的脚本，并且根据新动画何时启动，当前动画的其余元素必须 .stop（） 并移动到另一个位置（这是有效的）。因此，我构建了一个动画数组，当添加新动画时，该数组将获得.animate（）ed，并且当每个动画完成时，我需要将其从数组中删除。这是我尝试使用的代码：

for (var i = 0; i < animations[key].length; i++) {
animations[key][i].object.animate({
    top: animations[key][i].endCoords.top,
    left: animations[key][i].endCoords.left
}, {
    duration: 800,
    complete: function() {
        console.log(i);
        animations[key].splice(i, 1);
        console.log(animations);
    }
});
}

问题是当完成时：运行，i设置为animations[key].length。我很确定我理解它为什么要这样做，因为 for 循环在动画完成之前继续（这很好，因为它确实允许我一次运行多个动画），但是有没有办法编写代码以便在完成时：运行它有正确的索引来做拼接？

提前感谢！

为每次迭代使用/分配不同的变量应该可以：

for (var i = animations[key].length-1; i >= 0; i--) {
    var id = i;
    animations[key][id].object.animate({
        top: animations[key][id].endCoords.top,
        left: animations[key][id].endCoords.left
    }, {
        duration: 800,
        complete: function() {
            console.log(id);
            animations[key].splice(id, 1);
            console.log(animations);
        }
    });
}

否则，您最终每次都会调用animations[key].splice(animations[key].length, 1)（因为循环在任何动画有时间完成之前执行）。

即便如此，您可能仍需要重新考虑您的方法：除非动画以与开始时完全相同的顺序完成，否则您可能仍然会遇到麻烦！

编辑：反转循环方向（见下面的注释） - 这有以相反顺序启动动画的副作用

相关文章：