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

你可能想，如果你重新设置元素的位置再次创造动画位置。