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

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

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

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

Q&A

解決済

2回答

5496閲覧

jQuery 文字のフェードイン、フェードアウトをする時、フェードイン後しばらく表示(停止)させていたい

kato00

総合スコア71

jQuery

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

0グッド

1クリップ

投稿2018/03/23 06:51

やりたいこと

jQueryで文字のフェードイン、フェードアウトをする時、フェードイン後しばらくその画像を表示(停止)させていたいです。

下記動きの詳細です。

1、画像1をフェードインで表示。
2、フェードインしきった画像1を数秒表示
3、フェードアウトで表示を消す
4、画像2をフェードイン。その後の動きは1〜3同様
5、1〜4を繰り返す

という動きの実装をしています。

2のフェードインしきった画像1を数秒表示をいう動きがあるため、setTimeoutでフェードアウトを開始する時間を設定することでフェイードインしきった状態を数秒保持しています。

質問1、上記動きをしたい時は、上記の考え方、下記コードの記述で合っているのか
(下記コードの場合、やりたい動きはできています)
それとも、もっと簡単な記述の方法があれば教えて欲しいです。

質問2、やりたいことの5番ですが、1〜4を繰り返したいので、1〜4までの動きを関数としてまとめ、
4が終わったタイミングで再度読み込むという記述をしたのですが、これが動きません(コメント記述部分)
何が違うのでしょうか??

jQuery

1 $(function(){ 2 3// setTimeout('movieImage()');←関数の呼び出し 4// 5// function movieImage(){ 6setTimeout(function(){ 7 $('#movieImageFarst').fadeIn(2000) 8},2000); 9 10setTimeout(function(){ 11$('#movieImageFarst').fadeOut(2000) 12},7000); 13 14 15setTimeout(function(){ 16 $('#movieImageSecond').fadeIn(2000) 17},9000); 18 19setTimeout(function(){ 20$('#movieImageSecond').fadeOut(2000) 21},14000); 22 23// setTimeout($(movieImage),16000) 24// 25// } 26 27 28 29// ↓画像のフェードインアウト 動くけど、画像停止状態ができない 30// // $('#movieImageFarst').fadeIn(2000,function(){ 31// // $('#movieImageFarst').fadeOut(2000) 32// // }) 33 34 35 }) 36 37</script>

html

1<div id="mainImage"> 2 <img src="main_img.jpg" width="100%"/> 3 <img id="movieImageFarst" src="catchcopy.png" width="100%"/> 4 <img id="movieImageSecond" src="catchcopy2.png" width="100%"/> 5 </div> 6

css

1#mainImage{ 2 padding-top: 15px; 3 background-color: rgb(29, 60, 140); 4 height:440px; 5 position: relative; 6} 7 8#movieImageFarst{ 9 position: absolute; 10 top: 0; 11 left: 0; 12 z-index: 10; 13 display: none; 14} 15 16#movieImageSecond{ 17 position: absolute; 18 top: 0; 19 left: 0; 20 z-index: 10; 21 display: none; 22}

jQuery初心者のため、理解していない点が多々あると思います。
足りない情報があればおっしゃって下さい。
宜しくお願いします。

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

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

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

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

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

kszk311

2018/03/23 07:12

簡単な方法ということでしたら、bxsliderのプラグインをオススメしますが、プラグインはなしでやりたいということですか?
kato00

2018/03/23 07:14

ご回答ありがとうございます!そうですね、今jQueryの勉強をしているので、プラグインなしでコードを書いてみたいです。宜しくお願いします。
kszk311

2018/03/23 07:16

じゃあ、CSSのアニメーションもなしってことですね
kato00

2018/03/23 07:21

animate.cssというものの事でしょうか??基本的にはjsファイルをダウンロードし、その範囲で出来るコードの組み方をしたいです。宜しくお願いします。
guest

回答2

0

ベストアンサー

jqueryだけだとこんな感じでいいかと。
1.コールバックにどんどん書いてアニメーションを連結
2.止めたい処理の前にdelay(秒数)を書く
3.最後のコールバックに自身の関数名

「繰り返し」の意味が違ってたらすみません。
ともかくsetTimeoutはしなくていいと思います。

javascript

1 2//最初は適当にコール 3 animloop(); 4 5function animloop(){ 6 $("#movieImageFarst").fadeIn(2000,function(){ 7 $('#movieImageFarst').delay(5000).fadeOut(2000,function(){ 8 $('#movieImageSecond').fadeIn(2000,function(){ 9 $('#movieImageSecond').delay(5000).fadeOut(2000,animloop); 10 }); 11 }); 12 }); 13}

#追記
cssアニメーションというのはcssだけでできるものですよ。
こんな感じでできます。https://jsfiddle.net/sousuke/cphju943/1/

投稿2018/03/23 09:41

編集2018/03/23 14:32
sousuke

総合スコア3828

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

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

0

質問1

動きはこちらで大丈夫だと思います。ただ、時間を変数に持たせておいた方が、やりやすいと思います。

質問2

3行目のsetTimeout('movieImage()');の部分は、movieImage();にすれば動くような気がします。
ただ、setTimeoutの乱用はやめた方がいいと思います、
画像がもし増えた場合、アニメーションさせる要素ごとにsetTimeoutが増えてしまうので…。

自分ならこうやって組むだろうということで、一旦組んじゃいました。
(組みながら質問内容見てたら、やりたいことが分かってきたので、組んじゃって良かったのかな、というところがありますが…)
https://codepen.io/sleepzzz/pen/RMVYaO

ポイントは以下です。

  1. setTimeoutを一つにまとめる
  2. アニメーションの時間と止まっている時間をあらかじめ宣言し、そのプラスした時間でループさせる
  3. 画像が増えてもslideElのセレクタを増やすだけで対応できる

一度確認していただけると。
一応JSだけこちらに記載しておきます。

javascript

1var slideEl = ['#movieImageFarst', '#movieImageSecond', '#movieImageThird'];//動かす分IDを振っておく 2var slideCurrent = 0;//最初の要素 3var slideAnimTime = 2000;//アニメーション時間(ms) 4var slideStopTime = 5000;//止まっている時間(ms) 5var slideTimer = false; 6 7//表示 8function show(selector){ 9// console.log('show', selector); 10 $(selector).delay(slideAnimTime).queue(function(){ 11 $(this).fadeIn(slideAnimTime).dequeue(); 12 }); 13} 14 15//消える 16function hide(selector){ 17// console.log('hide', selector); 18 $(selector).fadeOut(slideAnimTime); 19} 20 21//ループ 22function roop(){ 23 24 //showする要素以外全てにhideアクションかけておく 25 var slideEl2 = slideEl.slice(0, slideEl.length); 26 var slideEl3 = slideEl2.splice(slideCurrent, 1); 27 // console.log(slideCurrent, slideEl2, slideEl3); 28 $.each(slideEl2,function(index,val){ 29 hide(val); 30 }); 31 32 show(slideEl[slideCurrent]); 33 34 //count 35 slideCurrent++; 36 if(slideCurrent >= slideEl.length){ 37 slideCurrent = 0; 38 } 39 40 //{アニメーション時間(消える+表示)+止まっている時間}のループ 41 slideTimer = setTimeout(roop, slideAnimTime*2+slideStopTime); 42} 43 44$(function(){ 45 roop(); 46// slideTimer = setInterval(roop, slideAnimTime*2+slideStopTime); 47})

投稿2018/03/23 10:11

kszk311

総合スコア3404

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

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

kszk311

2018/03/24 04:52

なんか難しく考えてましたねw
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問