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>

DanielB · Accepted Answer · 2011-07-15 08:50:03Z

1

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.

answered Jul 15, 2011 at 8:50

DanielB

20.3k2 gold badges48 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SPG Over a year ago

The purpose why I am doing this is that I want to set all of them into a infinite loop, but still faid! Just ask a new question of this. Hope I can solute it. Thanks!

sgatto · Accepted Answer · 2011-07-15 08:56:08Z

0

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

answered Jul 15, 2011 at 8:56

sgatto

11911 bronze badges

Collectives™ on Stack Overflow

jquery delay() function

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related