jquery delay() function

Question

I have 5 divs in my page. Father div "container" includes four child div. I want to use easing plugin to show each page by sequence. At the end set them back to "top : -200px". Then put all of them into setInterval() as a infinite loop. But this doesn't work. Could someone tell me why? Thanks!

<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

You can use the complete callback to do a sequence of animations. See here: http://api.jquery.com/animate/

Answer 2

Have your "reset" code within the complete callback of animate.

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

You have to alter the delay time, because this is count from the time, when the initial animation is complete.