jquery連續動畫

Question

我做了一個使用jquery的文本動畫。

，我用「的setInterval」，要重新開始再次連續動畫...

但問題是所有動畫的對象相同的時間和重複......

它必須是動畫一一...

我該如何修復代碼？ plz幫我〜

<div class="textAnm2"> 

        <p class="txt1">11111</p> 
        <p class="txt2">22222</p> 
        <p class="txt3">3333</p> 

       </div> 


    .textAnm2 .txt1 { position:absolute; top:340px; left:615px; font-size:13px; opacity:0; color:#142462; } 
    .textAnm2 .txt2 { position:absolute; top:230px; left:120px; font-size:13px; opacity:0; color:#142462; } 
    .textAnm2 .txt3 { position:absolute; top:280px; left:270px; font-size:13px; opacity:0; color:#142462; } 



    <script> 

    setInterval(function() { 

    $('.txt1').delay(500).animate({ 
     opacity: '1', 
     top: '350px' 
    }, 500, 'linear') ; 

    $('.txt1').delay(2000).animate({ 
     opacity: '0' 
    }, 500, 'linear') ; 



    $('.txt2').delay(4500).animate({ 
     opacity: '1' 
    }, 500, 'linear') ; 

    $('.txt2').delay(2000).animate({ 
     opacity: '0' 
    }, 500, 'linear') ; 




    $('.txt3').delay(9000).animate({ 
     opacity: '1', 
     top: '290px' 
    }, 500, 'linear') ; 

    $('.txt3').delay(2000).animate({ 
     opacity: '0' 
    }, 500, 'linear') ; 

}, 1000); 

    </script> 

下面的示例源。

請幫我......

Answer 1

把它包在功能和召回，一旦所有的動畫完成的功能。
您可以使用與when()和then()每個動畫返回的承諾，知道什麼時候再次調用函數：

ani(); 

function ani() { 
    $.when(
     $('.txt1').delay(500).animate({ 
      opacity: '1', 
      top: '350px' 
     }, 500, 'linear'), 

     $('.txt1').delay(2000).animate({ 
      opacity: '0' 
     }, 500, 'linear'), 


     $('.txt2').delay(4500).animate({ 
      opacity: '1' 
     }, 500, 'linear'), 

     $('.txt2').delay(2000).animate({ 
      opacity: '0' 
     }, 500, 'linear'), 

     $('.txt3').delay(9000).animate({ 
      opacity: '1', 
      top: '290px' 
     }, 500, 'linear'), 

     $('.txt3').delay(2000).animate({ 
      opacity: '0' 
     }, 500, 'linear') 
    ).then(ani); 
} 

FIDDLE

你可能想，如果你重新設置元素的位置再次創造動畫位置。