いくつかの要素を順番にフェードイン・フェードアウトさせ、最後まで来たら最初に戻るループを作りたい

Question

はじめはサービス１が表示ており、３秒経ったらサービス１はフェードアウト、
フェードアウトすると同時にサービス２がフェードイン

さらに３秒経ったらサービス２がフェードアウト、
フェードアウトすると同時にサービス３がフェードイン・・・・

サービス４がフェードアウトしたら、サービス１に戻って同じ処理を繰り返す。

というものを作りたいと思っているのですが、ループの作り方がわからず困っています。
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);

これでは、１度しか動かないため、この処理をループする方法がわからず困っています。
どうぞよろしくお願いいたします。

Answer 1

こんなのはどうですか？

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);

Comments

[gab]

ご回答頂きありがとうございます！

Answer 2

できるだけ、主様のコードを生かすと、

$('#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/

Comments

[gab]

ご回答ありがとうございます！
こちらで問題なく動きました！

差支えなければで結構ですが、これをコンパクトに書くにはどうしたらよろしいでしょうか？