javascript - 接连播放动画

我想做的就是用JQuery在一个循环中播放动画

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

问题是我不想在动画函数中使用回调，因为我要运行X动画并且不能对这些论文进行“硬编码”。 Javascript没有“等待”功能。 delay（）函数也不理想。

过程：动画1正在运行，然后完成，然后动画2在运行，完成，然后动画3，等等。。。但是我有一个动态的动画数组。

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

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

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

最佳答案

您可以使用递归函数调用，并在动画完成后再次调用它，如下所示

function animate(start, end) {
  (function rec() {
    if (start <= end)
      $('#'+animations[start++]).animate({top:100}, 1500, rec);
  })();
}

/* setup  */
var animations = Array(25).fill(0).map( (_,i) => i);
animations.forEach( x => { $('<span />',{id:x}).appendTo('body') });
/* function call */
animate(0, 25);

span {
  position: relative;
  top: 0;
  height: 10px;
  width: 10px;
  background : red;
  display:inline-block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

关于javascript - 接连播放动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46464872/