jQueryで繰り返し処理がうまくいかない

Question

4枚の画像を3秒ごとに順番に表示・非表示させ、1周したら繰り返す。としたいのですが、うまくいきません。
1周までは動くのですが、繰り返し工程に入ってくれません。
for文で実装したいのですが効かず、原因がわかりませんでした。

<div id="img1">
<div>
  <p><img src="1.png"></p>
</div>
</div>

<div id="img2">
<div>
  <p><img src="2.png"></p>
</div>
</div>

<div id="img3">
<div>
  <p><img src="3.png"></p>
</div>
</div>

<div id="img4">
<div>
  <p><img src="4.png"></p>
</div>
</div>

#img1 div, #img2 div, #img3 div, #img4 div {
  position: absolute;
  top:0;
  opacity: 0;
  transition: 2.5s;
  left:50%;
}

#img1 div.showUp, #img2 div.showUp, #img3 div.showUp, #img4 div.showUp {
  opacity: 1;
  margin-top: 0;
  transform:    translateX(-20px) translateY(20px);
}

#img1 div.showDown, #img2 div.showDown, #img3 div.showDown, #img4 div.showDown {
  opacity: 0;
  margin-top: 0;
  transform:    translateX(-40px) translateY(40px);
}

$(function() {
  for (var i = 0; i <=10; i++) {

    var time = 3000;

    $('#img1 div').addClass('showUp');

    setInterval(function() {
      $('#img1 div').addClass('showDown');
    },time);

    setInterval(function() {
      $('#img2 div').addClass('showUp');
    },time+3000);

    setInterval(function() {
      $('#img2 div').addClass('showDown');
    },time+6000);

    setInterval(function() {
      $('#img3 div').addClass('showUp');
    },time+9000);

    setInterval(function() {
      $('#img3 div').addClass('showDown');
    },time+12000);

    setInterval(function() {
      $('#img4 div').addClass('showUp');
    },time+15000);

    setInterval(function() {
      $('#img4 div').addClass('showDown');
    },time+18000);

    var time = 0;
  }
});

Comments

[m.ts10806]

今４枚しかないようですが、５枚６枚と増えていくようなことは想定されていますか？

[chinki]

ありがとうございます。とりあえずは4枚で考えています。

[m.ts10806]

もう１点
コードからは１１週で終わるように見受けられます。
「半永久的に繰り返す」じゃなくていいんですよね？

[chinki]

申し訳ありません、半永久が理想的です。自分なりに書いていて、とりあえず10周までで確認できればと思っていたころの記述のままでした。

Answer 1

クラスの付け替えだとdelayが効かないのでこんな感じでしょうか

• codepen add & remove class loop

Comments

[yambejp]

Deferredとかのほうが簡単にいけるかも・・・

[chinki]

ありがとうございます。バッチリ動いています。queueを使うという発想はありませんでした。

[yambejp]

普通のjsだとこんな感じですかね・・

window.addEventListener('DOMContentLoaded',async()=>{
const time=3000;
const sleep=async(ms)=>new Promise(resolve=>setTimeout(()=>resolve(),ms));
const imgs=[
document.querySelector('#img1 div'),
document.querySelector('#img2 div'),
document.querySelector('#img3 div'),
document.querySelector('#img4 div'),
];
var count=0;
var flg=true;
while(flg){
imgs[count].classList.add('showUp');
await sleep(time);
imgs[count].classList.add('showDown');
await sleep(time);
imgs[count].classList.remove('showUp','showDown');
count=count>=3?0:count+1;
}
});

[chinki]

js版もありがとうございます！とても助かりました。