Javascript 一个接一个地播放动画

我想做的是使用JQuery在循环中播放动画

for(i = 0; i < 25; i ++){
  $('#'+animations[i]).animate({...}, 1500);
}

问题是我不想在animate函数中使用回调函数，因为我有X个动画要运行，并且我不能硬编码这些。Javascript没有等待函数。延迟功能也不理想

过程：动画1正在运行，然后是动画2正在运行，然后是动画3正在运行，等等。。。但我有一系列动态动画

setTimeout方法是一个大问题，因为Javascript执行setTimeout并继续他的执行

for(i = 0; i < 25; i ++){
  setTimeout(function(){ $('#'+animations[i]).animate({...}, 1500); }, timer);
}

---

var i的值每次都是25，因为等待执行匿名函数的时间，循环就结束了。

您可以使用递归函数调用，并在动画完成后再次调用它，类似这样

函数animatestart，end{ 功能记录{ 如果开始我； animations.forEach x=>{$，{id:x}.appendTo'body'}； /*函数调用*/ 动画0,25； 跨度{ 位置：相对位置； 排名：0； 高度：10px； 宽度：10px； 背景：红色； 显示：内联块 }

---

如果出于某种原因不想使用回调，可以使用i并将其乘以时间，因此您的代码将是：

for(i = 0; i < 25; i ++){
  setTimeout(function(){ $('#'+animations[i]).animate({...}, 1500); }, i*1500);
}

---

通过这种方式，您将一次创建所有超时，但它们的延迟将设置为0、1500、3000、4500等等。

要更改i的值，您必须将setTimeout函数包装到一个iLife中，如下所示：fori=0；i<25；i++{setTimeoutfunctionj{$+动画[j]。动画{…}，1500；}，timeri；}在@Mateusz的评论中添加，你可以声明我使用的不是IILife，而是ILife，因为你修改的时间是持续时间，而不是延迟；@MaartenBicknese编辑了我的答案，这样应该可以。