jquery delay（）函数

Question

我的页面中有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>

Answer 1

在完整的动画回调中包含“重置”代码。

   $("#div4").delay(6000).animate(
        { top: 0 }, {
            duration: "slow",
            easing: "easeOutElastic",
            complete: function() { 
                $(this).delay(2000, function(){
                     $(this).css("top", "-200px");
                });
            }
        });

您必须更改延迟时间，因为这是从初始动画完成时算起的。

Answer 2

您可以使用完整的回调来执行一系列动画。见这里：http://api.jquery.com/animate/