jquery infite动画循环

Question

我该如何循环这个。我尝试了不同的方式，但仍然表现不错。像setInterval（），while（）。有人能帮助我吗？

<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> 

当我把所有的JS里面

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

，页面会陷入困境。它似乎只适用于两个动画。 谢谢！

Answer 1

只要确定，但你把所有的代码放在的document.ready中setInterval的权利？

如：

$(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