我想在元素列表上触发一个动画,并让每次迭代的延迟增加一点。到目前为止,我已经完成了这里的工作:
var timer = 1000;
$('div').each(function(){
setTimeout(function(){
$('div').animate({
width:200,
height:200,
opacity:1
}, 1000);
}, timer);
timer += 1000;
});
没有任何错误,从技术上讲它是可行的,但它们同时都具有动画效果。我知道它与此非常相似(几乎相同),similar code ,但由于某种原因它不起作用。我错过了什么?
最佳答案
您可以使用索引参数来增加动画。
此外,您的目标是循环内的所有元素,请改用第二个参数,即当前迭代的元素
$('div').each(function(i, elem){
setTimeout(function(){
$(elem).animate({
width:200,
height:200,
opacity:1
}, 1000);
}, 1000 * i);
});
jQuery 还有一个delay()
方法可以用来做动画
$('div').each(function(i, elem){
$(elem).delay(i * 1000).animate({
width : 200,
height : 200,
opacity : 1
}, 1000);
});
div {
width:0;
height:0;
opacity:0;
display:block;
margin:0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background:#f00;"></div>
<div style="background:#000;"></div>
<div style="background:#ccc;"></div>
关于javascript - jquery - .each() 的每次迭代增加超时间隔,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36228724/