jquery - 用jquery连续动画

Question

我使用 jquery 制作了一个文本动画。

我使用“setInterval”重新开始连续动画......

但问题是所有对象都同时动画并重复......

它必须是一个一个动画......

我该如何修复代码？请帮帮我~

    <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);
}

小提琴

如果要再次为位置设置动画，您可能需要重置元素的位置。