はじめはサービス1が表示ており、3秒経ったらサービス1はフェードアウト、
フェードアウトすると同時にサービス2がフェードイン
さらに3秒経ったらサービス2がフェードアウト、
フェードアウトすると同時にサービス3がフェードイン・・・・
サービス4がフェードアウトしたら、サービス1に戻って同じ処理を繰り返す。
というものを作りたいと思っているのですが、ループの作り方がわからず困っています。
htmlとjsは次のように書きました。
html
1<div id="service01" class="container"> 2 サービス1 3</div> 4 5<div id="service02" class="container"> 6 サービス2 7</div> 8 9<div id="service03" class="container"> 10 サービス3 11</div> 12 13<div id="service04" class="container"> 14 サービス4 15</div>
Javascript
1$('#service02, #service03, #service04').hide(); 2 3setTimeout(function(){ 4 $('#service01').fadeOut(500); 5 setTimeout(function(){ 6 $('#service02').fadeIn(); 7 },500); 8},3000); 9 10setTimeout(function(){ 11 $('#service02').fadeOut(500); 12 setTimeout(function(){ 13 $('#service03').fadeIn(); 14 },500); 15},6000); 16 17setTimeout(function(){ 18 $('#service03').fadeOut(500); 19 setTimeout(function(){ 20 $('#service04').fadeIn(); 21 },500); 22},9000); 23 24setTimeout(function(){ 25 $('#service04').fadeOut(500); 26 setTimeout(function(){ 27 $('#service01').fadeIn(); 28 },500); 29},12000); 30
これでは、1度しか動かないため、この処理をループする方法がわからず困っています。
どうぞよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/31 08:42