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>
以下のサンプルソース。
私を助けてください......