質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

1727閲覧

Jqueryで、listの最後のみ違う動きをさせたいです。

kaerunrun

総合スコア6

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/01/03 05:33

Jqueryを使って、違う文章を順番に3回表示させ、4番目の文章だけずっと表示させたいです。

現状
fadein、fadeoutを使って、文章を順番に表示させることはできています。
ですが最後の文章も同じ設定にしているので、1~3の文章と同じく消えてしまい、挙動がくり返されてしまいます。

やりたいこと
最後の文章だけをずっと表示させたい。
挙動を繰り返さず、一回繰り返したら終わりにしたい。

listの最後だけを別で設定する書き方などありませんでしょうか?
行き詰まってしまっているので、ご教示いただけると幸いです。

HTML

1<div class="message-box"> 2 <ul class="message"> 3 <li class="text"> 4 <p>タイトル1</p><br> 5 <span>文章</span> 6 </li> 7 <li class="text"> 8 <p>タイトル2</p><br> 9 <span>文章</span> 10 </li> 11 <li class="text"> 12 <p>タイトル3</p><br> 13 <span>文章</span> 14 </li> 15 <li class="text child-text"> 16 <p>ずっと表示させたい文章</p> 17 </li> 18 </ul> 19</div>

java

1const txts = $('.text'); 2let txtIndex = -1; 3txts.hide() 4 5function showNextTxt() { 6 txtIndex++; 7 txts.eq(txtIndex % txts.length).fadeIn(2000).delay(3000).fadeOut(2000, showNextTxt); 8} 9showNextTxt(); 10 11

css

1body { 2 background-color: rgb(0, 0, 0); 3 font-family: "serif"; 4} 5 6.message-box { 7 background-color: rgb(0, 0, 0); 8 min-height: 100vh; 9 width: 100%; 10 position: relative; 11} 12 13.message { 14 margin: 0; 15 position: absolute; 16 top: calc(45% - 0.5em); 17 width: 100%; 18 text-align: center; 19 padding-left: 0; 20 .text { 21 color: #fff; 22 list-style: none; 23 p { 24 font-family: "manifesto"; 25 margin: 0px; 26 font-size: 30px; 27 font-weight: bold; 28 } 29 } 30}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

最後の要素のときはfadeInだけにして再帰しなければいいでしょう。

js

1const txts = $('.text'); 2let txtIndex = -1; 3txts.hide() 4 5function showNextTxt() { 6 txtIndex++; 7 if (txtIndex < txts.length - 1) { 8 txts.eq(txtIndex).fadeIn(2000).delay(3000).fadeOut(2000, showNextTxt); 9 } else { 10 txts.eq(txtIndex).fadeIn(2000); 11 } 12} 13showNextTxt();

投稿2022/01/03 07:40

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

シンプルにif文で分岐させてはいかがでしょうか。

jQuery

1const txts = $('.text'); 2let txtIndex = -1; 3let txtMax = txts.length-1; 4txts.hide() 5 6function showNextTxt() { 7 txtIndex++; 8 if(txtIndex != txtMax){ 9 txts.eq(txtIndex).fadeIn(200).delay(300).fadeOut(200, showNextTxt); 10 }else{ 11 txts.eq(txtIndex).fadeIn(200); 12 } 13} 14showNextTxt();

サンプル
https://codepen.io/recal/pen/jOGxNra

code横の文字ですが
javaではなくjQuery
cssではなくscss
が正しいかと。

投稿2022/01/03 07:09

編集2022/01/03 07:33
recal

総合スコア1126

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問