我想在元素列表上触发动画,并且每次迭代都会延迟一点.我到目前为止已经完成了我的工作:
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。