Jqueryを使って、違う文章を順番に3回表示させ、4番目の文章だけずっと表示させたいです。
現状
fadein、fadeoutを使って、文章を順番に表示させることはできています。
ですが最後の文章も同じ設定にしているので、1~3の文章と同じく消えてしまい、挙動がくり返されてしまいます。
やりたいこと
最後の文章だけをずっと表示させたい。
挙動を繰り返さず、一回繰り返したら終わりにしたい。
listの最後だけを別で設定する書き方などありませんでしょうか?
行き詰まってしまっているので、ご教示いただけると幸いです。
HTML
<div class="message-box"> <ul class="message"> <li class="text"> <p>タイトル1</p><br> <span>文章</span> </li> <li class="text"> <p>タイトル2</p><br> <span>文章</span> </li> <li class="text"> <p>タイトル3</p><br> <span>文章</span> </li> <li class="text child-text"> <p>ずっと表示させたい文章</p> </li> </ul> </div>
java
const txts = $('.text'); let txtIndex = -1; txts.hide() function showNextTxt() { txtIndex++; txts.eq(txtIndex % txts.length).fadeIn(2000).delay(3000).fadeOut(2000, showNextTxt); } showNextTxt();
css
body { background-color: rgb(0, 0, 0); font-family: "serif"; } .message-box { background-color: rgb(0, 0, 0); min-height: 100vh; width: 100%; position: relative; } .message { margin: 0; position: absolute; top: calc(45% - 0.5em); width: 100%; text-align: center; padding-left: 0; .text { color: #fff; list-style: none; p { font-family: "manifesto"; margin: 0px; font-size: 30px; font-weight: bold; } } }
まだ回答がついていません
会員登録して回答してみよう