使用jquery连续设置动画

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

11111
22222
3333

.textAnm2.txt1{位置：绝对；顶部：340px；左侧：615px；字体大小：13px；不透明度：0；颜色：#142462；}
.textAnm2.txt2{位置：绝对；顶部：230px；左侧：120px；字体大小：13px；不透明度：0；颜色：#142462；}
.textAnm2.txt3{位置：绝对；顶部：280px；左侧：270px；字体大小：13px；不透明度：0；颜色：#142462；}
setInterval（函数（）{
$（'.txt1'）。延迟（500）。设置动画({
不透明度：“1”，
顶部：“350px”
}，500，'线性'；
$（'.txt1'）。延迟（2000）。动画({
不透明度：“0”
}，500，'线性'；
$（'.txt2'）。延迟（4500）。设置动画({
不透明度：“1”
}，500，'线性'；
$（'.txt2'）。延迟（2000）。动画({
不透明度：“0”
}，500，'线性'；
$（'.txt3'）。延迟（9000）。设置动画({
不透明度：“1”，
顶部：“290px”
}，500，'线性'；
$（'.txt3'）。延迟（2000）。动画({
不透明度：“0”
}，500，'线性'；
}, 1000 ); 

下面是示例源代码

---

请帮助我……

将其包装在一个函数中，并在所有动画完成后调用该函数。
您可以将每个动画返回的承诺与

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

---

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

将其包装在函数中，并在所有动画完成后调用该函数。
您可以将每个动画返回的承诺与

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

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

可能重复的元素的可能重复