Question

我想做的是使用JQuery循环播放另一个动画

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

问题在于我不想在animate函数中使用回调，因为我有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，因为等待时间执行匿名函数，循环已经完成了..

Answer 1

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

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

这样你就可以一次创建超时，但是它们的延迟设置为0,1500,3000,4500等等。

一个接一个地播放动画

2 个答案: