0

jqueryでテキストアニメーションを作ってみました。

そして、連続アニメーションを最初からやり直す「setInterval」を使用しました...

しかし問題は、すべてのオブジェクトが同時にアニメーション化され、繰り返されることです......

1つずつアニメーション化する必要があります...

コードを修正するにはどうすればよいですか? 助けてください〜

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

以下のサンプルソース。

私を助けてください......

4

1 に答える 1