Question

How can I loop this. I tried different ways already but still faild. Like setInterval(), while(). Could someone help me?

<div id="tablediv">
    <table border=1 height=850 width=1200>
        <tr><td >1</td><td >2</td><td>3</td></tr>
        <tr><td  width=300 height=400>4</td>
        <td >
            <div id="banner">
                    <div id="div1">
                        <p>This is the first page.</p>
                    </div>
                    <div id="div2">
                        <p>This is the second page.</p>
                    </div>
                    <div id="div3">
                        <p>This is the third page.</p>
                    </div>
                    <div id="div4">
                        <p>This is the fourth page.</p>
                    </div>
            </div>
        </td>
        <td width=300 height=400>5</td>
        </tr>
        <tr><td>6</td><td>7</td><td>8</td></tr>
    </table>
</div>


<style>
body{
overflow: hidden;
}

#tablediv{
width: 1200px;
height: 850px; 
margin: 0 auto;
}

#banner{
background-color: #e1e1e1;
position: relative;
width: 600px;
height: 400px;
}

#div1{
width:600px;
height:400px;
background-color: #fc3;
position: absolute;
top: -400px;
}
#div2{
width:600px;
height:400px;
background-color: #cc3;
position: absolute;
top: -400px;
}
#div3{
width:600px;
height:400px;
background-color: #cf3;
position: absolute;
top: -400px;
}
#div4{
width:600px;
height:400px;
background-color: #ff3;
position: absolute;
top: -400px;
}
</style>

<script src="jquery.js"></script>
<script>
$(document).ready(function(){   

    $("#div1").animate({
        top: "0px"
    }, 1000).delay(2000).animate({
        top: "400px",
    }, 1000);
    $("#div1").queue(function(){
        $(this).css("top", "-400px");
        $(this).dequeue();
    });
    $("#div2").delay(3000).animate({
        top: "0px"
    }, 1000).delay(2000).animate({
        top: "400px"
    }, 1000);
    $("#div2").queue(function(){
        $(this).css("top", "-400px");
        $(this).dequeue();
    });
    $("#div3").delay(6000).animate({
        top: "0px"
    }, 1000).delay(2000).animate({
        top: "400px"
    }, 1000);
    $("#div3").queue(function(){
        $(this).css("top", "-400px");
        $(this).dequeue();
    });
    $("#div4").delay(9000).animate({
        top: "0px"
    }, 1000).delay(2000).animate({
        top: "400px"
    }, 1000);
    $("#div4").queue(function(){
        $(this).css("top", "-400px");
        $(this).dequeue();
    });
});
</script>

when I put all the js inside

setInterval(function(){
  //script
});

the page will mess up. It seems only work for two animations.
Thanks!!!

Answer 1

Just making sure, but you are putting all of the code inside of the document.ready in setInterval right?

Eg:

$(document).ready(function(){
    setInterval( function() {
        /* MEAT!!! (what you had in document.ready) */
    }, 1000 ); // close setInterval and tell it to use a 1 second delay.
}); // close document.ready