やりたいこと
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初心者のため、理解していない点が多々あると思います。
足りない情報があればおっしゃって下さい。
宜しくお願いします。
回答2件
あなたの回答
tips
プレビュー