指定した時間ごとにクラスを付け替えたい

Question

初めて質問させていただきます。

実現したいこと

• 一定時間ごとに背景色（background）を変えたい

発生している問題・エラーメッセージ

setTimeoutを使い6秒毎にクラスを追加・削除して背景の色を替えることができましたが
最後のクラスまで行った後に、最初にもどる処理を実現できませんでした

該当のソースコード

<div id="colorbox" class="color01">
  <p>テキスト</p>
</div>

#colorbox{
  width:100%;
  height:300px;
}

.color01 {
	background: linear-gradient(180deg, rgb(154, 174, 186), rgb(90, 129, 145));
}
.color02 {
  background: linear-gradient(180deg, rgb(239, 209, 184), rgb(224, 146, 149));
}
.color03 {
  background: linear-gradient(180deg, rgb(219, 196, 189), rgb(191, 146, 108));
}
.color04 {
  background: linear-gradient(180deg, rgb(227, 204, 159), rgb(213, 194, 90));
}
.color05 {
  background: linear-gradient(180deg, rgb(219, 189, 189), rgb(110, 136, 103));
}
.color06 {
  background: linear-gradient(180deg, rgb(154, 174, 186), rgb(90, 129, 145));
}

$(function(){
           setTimeout(function(){
			   	$("#colorbox").toggleClass("color02");
			    $("#colorbox").removeClass("color01");
            },6000);
           setTimeout(function(){
			   $("#colorbox").toggleClass("color03");
			   $("#colorbox").removeClass("color02");
            },12000);
           setTimeout(function(){
			   $("#colorbox").toggleClass("color04");
			   $("#colorbox").removeClass("color03");
            },18000);
           setTimeout(function(){
			   $("#colorbox").toggleClass("color05");
			   $("#colorbox").removeClass("color04");
            },24000);
           setTimeout(function(){
			   $("#colorbox").toggleClass("color06");
			   $("#colorbox").removeClass("color05");
            },30000);
           setTimeout(function(){
			   	 $("#colorbox").toggleClass("color01");
			   $("#colorbox").removeClass("color06");
            },36000);
 });

お手数ですが、ご教授いただけると助かります。

Answer 1

この場合はtoggleClassではなくaddClassを使った方がいいと思います。

また、変数を活用してsetIntervalを使った方がいいと思います。

$(function(){
  let counter = 1;
  setInterval(changeBackground, 6000);
  function changeBackground() {
    $("#colorbox").removeClass("color0" + counter);
    if(counter >= 6) counter = 0;
    $("#colorbox").addClass("color0" + ++counter);
  }
 });

サンプル
こうすることで、最初はcolor01を削除color02を追加...color06を削除color01を追加、とループすることができるはずです。

または、cssだけで設定できます。

#colorbox{
  width:100%;
  height:300px;
  animation: bgcolor 36s infinite;
}

@keyframes bgcolor {
  0% {
    background: linear-gradient(180deg, rgb(154, 174, 186), rgb(90, 129, 145));
  }
  20% {
    background: linear-gradient(180deg, rgb(239, 209, 184), rgb(224, 146, 149));
  }
  40% {
    background: linear-gradient(180deg, rgb(219, 196, 189), rgb(191, 146, 108));
  }
  60% {
    background: linear-gradient(180deg, rgb(227, 204, 159), rgb(213, 194, 90));
  }
  80% {
    background: linear-gradient(180deg, rgb(219, 189, 189), rgb(110, 136, 103));
  }
  100% {
    background: linear-gradient(180deg, rgb(154, 174, 186), rgb(90, 129, 145));
  }
}

サンプル

Comments

[ktaro1031]

ypp様
ご返信ありがとうございます
頂いたサンプルこそ、理想としている動きでした。

setIntervalも知らなかったため、お教えいただきありがとうございます。
JavaScriptのタイマー処理など改めて学習いたします。

また、cssでの設定方法までも記載いただきありがとうございます。

Answer 2

color01とcolor06のbackgroundが同じものみたいですがよいのでしょうか？

window.addEventListener('DOMContentLoaded', ()=>{
  let counter=1;
  const min=1;
  const max=6;
  setInterval(()=>{
    console.log(counter);
    for(let i=min;i<=max;i++){
      document.querySelector('#colorbox').classList.toggle(`color0${i}`,counter==i);
    }
    counter++;
    if(counter>max) counter=min;
  },1000);
});

Comments

[ktaro1031]

yambejp様
ご返信ありがとうございます
すみません、記載ミスで同じ色になっておりました。

また、javascriptありがとうございます
ypp様のと同様にもとめていた動きが実装できました。