播放动画另一个

后，我想要做的是在一个循环中一个又一个玩动画与jQuery播放动画另一个

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

的问题是，我不希望使用动画功能，因为里面的回调我有X动画运行，我不能“硬编码”论文。 Javascript没有“等待”功能。 delay（）函数也不理想。

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

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

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

变种i的值将是25，因为每次等待时间来执行的匿名函数，在循环finnished ..

来源

2017-09-28 sql_newbie_developper

为了使的 “i” 的变化，则必须以包裹setTimeout函数成IIFE，像这样的值： '为（I = 0; I <25;我++）{ （setTimeout的（函数（j）{$（'＃'+ animations [j]）。animate（{...}，1500）;}，timer））（i）; }' – Mateusz

加入@Mateusz的评论，而不是使用IIFE，你可以使用['let']声明'i'（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /发言/让） –

你可以使用递归函数调用，并再次调用一次动画已完成，像这样

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>

来源

2017-09-28 08:56:07 adeneo

谢谢你，它的作品就像一个魅力！ –

如果你不希望使用出于某种原因回调，您可以使用您i和时间相乘，因此您的代码将是：

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

这种方式，你都会一次创建超时，但他们将不得不延迟设置为0，1500 ，3000,4500等等。

来源

2017-09-28 08:59:19 Walk

这不会工作，因为你修改的时间是持续时间，而不是延迟;） –

@MaartenBicknese编辑我的答案，这种方式它应该工作。 – Walk

这应该有效。 –

播放动画另一个

回答

相关问题