0

我正在编写一个同时运行多个动画的脚本，并且根据新动画的开始时间，当前动画的其余元素必须 .stop() 并移动到另一个位置（这是有效的）。所以我构建了一个动画数组，当添加一个新动画时，它会被 .animate() 编辑，当每个动画完成时，我需要将它从数组中删除。这是我尝试使用的代码：

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设置为动画[key].length。我很确定我理解它为什么这样做，因为 for 循环在动画完成之前继续（这很好，因为它确实允许我一次运行多个动画），但是有没有办法编写代码所以完成后：运行它有正确的索引来做拼接？

提前致谢！

4

1 回答 1

0

为每次迭代使用/分配不同的变量应该这样做：

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)每次都会调用（因为循环在任何动画有时间完成之前执行）。

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

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

于 2012-04-22T00:44:30.127 回答