いくつかの要素を順番にフェードイン・フェードアウトさせ、最後まで来たら最初に戻るループを作りたい
解決済
回答 2
投稿
- 評価
- クリップ 1
- VIEW 9,327
はじめはサービス１が表示ており、３秒経ったらサービス１はフェードアウト、
フェードアウトすると同時にサービス２がフェードイン
さらに３秒経ったらサービス２がフェードアウト、
フェードアウトすると同時にサービス３がフェードイン・・・・
サービス４がフェードアウトしたら、サービス１に戻って同じ処理を繰り返す。
というものを作りたいと思っているのですが、ループの作り方がわからず困っています。
htmlとjsは次のように書きました。
<div id="service01" class="container">
サービス1
</div>
<div id="service02" class="container">
サービス2
</div>
<div id="service03" class="container">
サービス3
</div>
<div id="service04" class="container">
サービス4
</div>$('#service02, #service03, #service04').hide();
setTimeout(function(){
$('#service01').fadeOut(500);
setTimeout(function(){
$('#service02').fadeIn();
},500);
},3000);
setTimeout(function(){
$('#service02').fadeOut(500);
setTimeout(function(){
$('#service03').fadeIn();
},500);
},6000);
setTimeout(function(){
$('#service03').fadeOut(500);
setTimeout(function(){
$('#service04').fadeIn();
},500);
},9000);
setTimeout(function(){
$('#service04').fadeOut(500);
setTimeout(function(){
$('#service01').fadeIn();
},500);
},12000);
これでは、１度しか動かないため、この処理をループする方法がわからず困っています。
どうぞよろしくお願いいたします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+2
こんなのはどうですか？
var services = ['#service01', '#service02', '#service03','#service04'];
var index = -1;
var doService = function(){
if(index < 0) { index++; return; }
$(services[index]).fadeOut(500);
index++;
index %= services.length;
$(services[index]).fadeIn();
};
setInterval(doService, 3000);投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
0
できるだけ、主様のコードを生かすと、
$('#service02, #service03, #service04').hide();
function roopFunc(){
setTimeout(function(){
$('#service01').fadeOut(500);
setTimeout(function(){
$('#service02').fadeIn();
},500);
},3000);
setTimeout(function(){
$('#service02').fadeOut(500);
setTimeout(function(){
$('#service03').fadeIn();
},500);
},6000);
setTimeout(function(){
$('#service03').fadeOut(500);
setTimeout(function(){
$('#service04').fadeIn();
},500);
},9000);
setTimeout(function(){
$('#service04').fadeOut(500);
setTimeout(function(){
$('#service01').fadeIn();
roopFunc(); //最初へ
},500);
},12000);
};
roopFunc();
こんな感じかと、、、冗長かつ、実動作確認しておりませんので、不具合などあるかもしれませんが、要するに最後(service04)の制御がおわった段階で、再起するという方法です。
先に記載したとおり、あくまでも現状コードを生かす形で書いております。
JavaScriptのコールバックとか、同期、非同期、などで検索されると、もっといろいろな方法が（そもそもの記載コードがかわってきますが）でてくるかと思います。
ご要望への追記です。
$('#service02, #service03, #service04').hide();
//
var services = ['#service01','#service02','#service03','#service04'];
var nowProcess = 0;
//
var fadeProcess = function(){
//
var fadeOutTgt = nowProcess;
if(++nowProcess == services.length)nowProcess = 0;
var fadeInTgt = nowProcess;
//
setTimeout(function(){
$(services[fadeOutTgt]).fadeOut(500);
setTimeout(function(){
$(services[fadeInTgt]).fadeIn();
fadeProcess();
},500);
//
},3000);
};
fadeProcess();
たとえば、こんな感じとか？？？
おそらく、この手の処理は、十人十色の書き方があるかと。
追記
いちおう動作確認しておきました。
https://jsfiddle.net/TomonoriIto/6yxynfnv/
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.35%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/05/31 17:42