2011-07-15 5 views
0

どのようにループすることができますか?私はすでにさまざまな方法を試しましたが、まだ失敗しています。 setInterval()、while()と同様です。誰か助けてくれますか?私はjquery infite animation loop

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

ページの意志を台無し内のすべてのjsを入れ

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

。それは2つのアニメーションのためだけに働くようです。 ありがとうございます!

+0

あなたは間隔の遅延を指定していません。多分それは問題ですか? –

答えて

1

コードのすべてを入れているだけですが、の中には、ドキュメントのが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 
+0

私はこれを試しました。それは動作するはずです。しかし、私がテストすると、シーケンスが変わります。 – nich

+0

「シーケンスは変わるでしょうか? – cwallenpoole

+0

rページ4、1から4にする必要がありますが、私はsetInterval()を使用します。シーケンスが変わります。 – nich