0

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>

2 Answers 2

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.

1
  • 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!
    – SPG
    Jul 15, 2011 at 11:28
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.