我想在元素列表上触发动画,并且每次迭代都会延迟一点.我到目前为止已经完成了我的工作:
var timer = 1000;
$('div').each(function(){
setTimeout(function(){
$('div').animate({
width:200,
height:200,
opacity:1
}, 1000);
}, timer);
timer += 1000;
});
没有任何错误,它在技术上有效,但它们同时具有动画效果.我知道它与similar code非常相似(几乎完全相同),但由于某种原因,它不起作用.我错过了什么?
解决方法:
您可以使用index参数随时增加动画.
此外,您要定位循环内的所有元素,而是使用第二个参数,这是当前迭代的元素
$('div').each(function(i, elem){
setTimeout(function(){
$(elem).animate({
width:200,
height:200,
opacity:1
}, 1000);
}, 1000 * i);
});
$('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>