jquery delay()函数
jquery delay()函数
提问于 2011-07-15 16:42:15
我的页面中有5个div。父div“容器”包括四个子div。我想使用轻松插件来按顺序显示每一页。最后将它们设置回"top：-200px“。然后将它们作为无限循环放入setInterval()中。但这不管用。有人能告诉我为什么吗？谢谢!
<div id="banner">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
<style>
#banner{
position: relative;
width: 600px;
height: 200px;
overflow: hidden;
}
#div1{
width:600px;
height:200px;
background-color: #fc3;
position: absolute;
top: -200px;
}
#div2{
width:600px;
height:200px;
background-color: #cc3;
position: absolute;
top: -200px;
}
#div3{
width:600px;
height:200px;
background-color: #cf3;
position: absolute;
top: -200px;
}
#div4{
width:600px;
height:200px;
background-color: #ff3;
position: absolute;
top: -200px;
}
</style>
<script src="jquery.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script>
$(document).ready(function(){
setInterval(function(){
$("#div1").animate(
{ top: 0 }, {
duration: "slow",
easing: "easeOutElastic"
});
$("#div2").delay(2000).animate(
{ top: 0 }, {
duration: "slow",
easing: "easeOutElastic"
});
$("#div3").delay(4000).animate(
{ top: 0 }, {
duration: "slow",
easing: "easeOutElastic"
});
$("#div4").delay(6000).animate(
{ top: 0 }, {
duration: "slow",
easing: "easeOutElastic"
});
$("#div1").delay(8000, function(){
$(this).css("top", "-200px");
});
$("#div2").delay(8000, function(){
$(this).css("top", "-200px");
});
$("#div3").delay(8000, function(){
$(this).css("top", "-200px");
});
$("#div4").delay(8000, function(){
$(this).css("top", "-200px");
});
}, 0);
});
</script>回答 2
Stack Overflow用户
回答已采纳
发布于 2011-07-15 16:50:04
将你的“重置”代码放在animate的完整回调中。
$("#div4").delay(6000).animate(
{ top: 0 }, {
duration: "slow",
easing: "easeOutElastic",
complete: function() {
$(this).delay(2000, function(){
$(this).css("top", "-200px");
});
}
});您必须更改延迟时间，因为这是从初始动画完成时的时间开始计算的。
Stack Overflow用户
发布于 2011-07-15 16:56:08
您可以使用完整的回调来制作一系列动画。查看此处：http://api.jquery.com/animate/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6704553
复制相关文章
相似问题
腾讯云开发者
