jQueryで、重ねた画像を順番に表示⇄非表示するループ処理を実現したい

Question

実現したいこと

①画面を描画したら、すぐにアニメーションの処理を開始。
②最初はmini_window_icon_wrap内の3枚の画像を表示しておき、一番上に重ねている1枚目の画像から2枚目までを順番に非表示にする処理を行う。3枚目にはアニメーションを適用しない。
③上記の非表示処理が終わったとき、3枚目の画像は表示したままの状態が正しい。
④その後、あまり間隔を空けずに、続けて表示の処理を開始し、2枚目の画像→1枚目の画像、の順番で表示の処理を行う。
⑤表示の処理が終わったら、あまり間隔を空けずに、続けて②の処理から繰り返す。

※参考
https://www.pinterest.jp/pin/707135578997418566/sent/?invite_code=0f1f9b9b4be94783aae454df7190032b&sender=477944716613135559&sfo=1

前提

以下セクションをHTML内に3つ（仮に上からA-B-Cとします）用意し、
mini_window_icon_wrap内の3枚の画像のうち、上から2枚の画像にのみアニメーションの処理を適用したい。

<section class="hogehoge">
        <div class="mini_window_icon_wrap">
          <img
            src="./assets/img/mini_window_icon_1.png"
            alt=""
            loading="lazy"
          />
          <img
            src="./assets/img/mini_window_icon_1.png"
            alt=""
            loading="lazy"
          />
          <img
            src="./assets/img/mini_window_icon_1.png"
            alt=""
            loading="lazy"
          />
        </div>
</section>

.mini_window_icon_wrap {
    z-index: 9999;
    position: relative;
    max-width: 146px;
    width: 100%;
    min-height: 107px;
    height: 100%;
    margin: -8.53334vw 5.33334vw 2.133334vw auto;

    img {
      position: absolute;
      top: 0;
      left: 0;
      // opacity: 0;
      transition: opacity 1s ease-in-out;

      &.active {
        opacity: 1;
      }

      &:nth-child(1) {
        z-index: 9999;
      }
      &:nth-child(2) {
        z-index: 8888;
        top: 2.66667vw;
        left: -2.66667vw;
      }
      &:nth-child(3) {
        z-index: 7777;
        top: 5.33334vw;
        left: -5.33334vw;
      }
    }
  }

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

・エラーは発生していないが、期待する挙動になっていない。
・A B Cの各セクションで、挙動が異なっている。

A B C全てで実現できていないこと：
①アニメーションの処理開始にやや時間がかかっている。画面を描画したらできるだけ早く処理を開始したい。
②mini_window_icon_wrap内の3枚の画像を最初から表示しておく処理ができていない。

AとBで実現できていないこと：
②最初は非表示の処理から開始したいが、最初は何も表示されていない状態で、④の表示の処理から開始してしまっており、かつ3枚目の画像にもアニメーションが適用されているため、3枚目→2枚目→1枚目の順番で表示の処理が行われている。
③3枚目の画像にはアニメーションを適用せず常に表示しておく、が正しい挙動だが、適用されてしまっており、かつ②の非表示の処理が終わるとHTMLのimgタグに自動的にstyle="display: none;"が追加され、非表示となってしまっている。

※参考動画
https://capture.dropbox.com/4rAH2Khu6SoOcluI

Cで実現できていないこと：
②最初は非表示の処理から開始したいが、一番下の3枚目のみが最初に表示されていて、④の表示の処理から開始してしまっている。

※参考動画：
https://capture.dropbox.com/ENrKLF1zCzR3yR93

※エラーメッセージなし

該当のソースコード

//ミニウィンドウに対するアニメーションの処理
$(function () {
  var images = $('.mini_window_icon_wrap img');
  var currentIndex = 0; // 最初は一枚目の画像から開始
  var animationDirection = 'forward'; // 最初のアニメーション方向は前向き

  function showImage(index) {
    $(images[index]).addClass('active').show();
  }

  function hideImage(index) {
    $(images[index]).removeClass('active').hide();
  }

  function animateImages() {
    setTimeout(function () {
      if (animationDirection === 'forward') {
        if (currentIndex < images.length - 1) {
          hideImage(currentIndex);
          currentIndex++;
          animateImages();
        } else {
          animationDirection = 'backward'; // アニメーション方向を逆に変更
          currentIndex = images.length - 2; // インデックスを初期化（最後から2枚目の画像から開始）
          setTimeout(hideImageStep, 150); // 0.15秒後に非表示の段階的な処理を開始
        }
      } else {
        if (currentIndex >= 0) {
          showImage(currentIndex);
          currentIndex--;
          animateImages();
        } else {
          animationDirection = 'forward'; // アニメーション方向を逆に変更
          currentIndex = 1; // インデックスを初期化
          setTimeout(showImageStep, 150); // 0.15秒後に表示の段階的な処理を開始
        }
      }
    }, 300); // 0.3秒ごとにアニメーションを繰り返す
  }

  function hideImageStep() {
    if (currentIndex >= 0) {
      hideImage(currentIndex);
      currentIndex--;
      if (currentIndex >= 0) {
        setTimeout(hideImageStep, 150); // 0.15秒後に次の画像を非表示にする
      } else {
        currentIndex = images.length - 1;
        animateImages();
      }
    }
  }

  function showImageStep() {
    if (currentIndex < images.length) {
      showImage(currentIndex);
      currentIndex++;
      if (currentIndex < images.length - 1) {
        setTimeout(showImageStep, 150); // 0.15秒後に次の画像を表示する
      } else {
        currentIndex = 0;
        setTimeout(animateImages, 150); // 0.15秒後にアニメーションを再開する
      }
    }
  }

  // 最初に表示しておく
  images.each(function (index) {
    if (index >= 1 && index < images.length - 1) {
      hideImage(index);
    }
  });
  showImage(images.length - 1); // 最後の画像を表示しておく
  setTimeout(animateImages, 0); // 画面描画後すぐにアニメーションの処理を開始
});

試したこと

1）各セクションごとに挙動が異なるため、jsの記述の最後に以下のような記述を追加して、各セクションに対してアニメーションが適用されるように試した。
→解決できなかったどころか、アニメーションが動かなくなった。

// Aセクション
  animateMiniWindow($('#A .mini_window_icon_wrap img'));

  // Bセクション
  animateMiniWindow($('#B .mini_window_icon_wrap img'));

  // Cセクション
  animateMiniWindow($('#C .mini_window_icon_wrap img'));

2）念のため、HTML内のjQueryのとjsの呼び出し位置が問題ないかを確認。
→問題なさそう。headタグ内ではうまく動作しないことが過去にあったため、いつもbody閉じタグの直前に入れています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="./assets/js/common.js"></script>
  </body>
</html>

2024/4/11時点：
以下のように、最初に各セクションに対しての画像処理を行う記述を追加したところ、A, B, Cの挙動を統一できました！

現時点で実現できていないことは、以下の内容のみになります。
②最初はmini_window_icon_wrap内の3枚の画像を表示しておき、一番上に重ねている1枚目の画像から2枚目までを順番に非表示にする処理を行う。
④その後、あまり間隔を空けずに、続けて表示の処理を開始し、2枚目の画像→1枚目の画像、の順番で表示の処理を行う。

追加したコード

animateImages('.pile_zipup_blouson .mini_window_icon_wrap img');
animateImages('.border_tee .mini_window_icon_wrap img');
animateImages('.hoodie_sweatshirts .mini_window_icon_wrap img');

修正後のコード全文

//ミニウィンドウに対するアニメーションの処理
$(function () {
  // 各セクションの画像処理を開始
  animateImages('.pile_zipup_blouson .mini_window_icon_wrap img');
  animateImages('.border_tee .mini_window_icon_wrap img');
  animateImages('.hoodie_sweatshirts .mini_window_icon_wrap img');

  function animateImages(selector) {
    var images = $(selector);
    var currentIndex = 0;
    var animationDirection = 'forward';

    function showImage(index) {
      $(images[index]).addClass('active').show();
    }

    function hideImage(index) {
      $(images[index]).removeClass('active').hide();
    }

    function animate() {
      setTimeout(function () {
        if (animationDirection === 'forward') {
          if (currentIndex < images.length - 1) {
            hideImage(currentIndex);
            currentIndex++;
            animate();
          } else {
            animationDirection = 'backward';
            currentIndex = images.length - 2;
            setTimeout(hideImageStep, 150);
          }
        } else {
          if (currentIndex >= 0) {
            showImage(currentIndex);
            currentIndex--;
            animate();
          } else {
            animationDirection = 'forward';
            currentIndex = 1;
            setTimeout(showImageStep, 150);
          }
        }
      }, 300);
    }

    function hideImageStep() {
      if (currentIndex >= 0) {
        hideImage(currentIndex);
        currentIndex--;
        if (currentIndex >= 0) {
          setTimeout(hideImageStep, 150);
        } else {
          currentIndex = images.length - 1;
          animate();
        }
      }
    }

    function showImageStep() {
      if (currentIndex < images.length) {
        showImage(currentIndex);
        currentIndex++;
        if (currentIndex < images.length - 1) {
          setTimeout(showImageStep, 150);
        } else {
          currentIndex = 0;
          setTimeout(animate, 150);
        }
      }
    }

    images.each(function (index) {
      if (index >= 1 && index < images.length - 1) {
        hideImage(index);
      }
    });
    showImage(images.length - 1);
    setTimeout(animate, 0);
  }
});

Comments

[yambejp]

具体的に何をどうしたいか図示できませんか？
参考として提示されたサイトも特に命題のような内容になっていないと思います

[Lhankor_Mhy]

ご提示のコードを試してみましたが、Aの表示が終わったらBの表示、のようにABCの処理を順番にしているようですが、これは想定通りなのですか？　それとも、ABCの処理は独立に行われてほしいのですか？

[chibikurochan]

@yambejpさま
早々にご質問くださりありがとうございます。
「実現したいこと」に図解を追加しました。
ご確認いただけますでしょうか。

[chibikurochan]

@Lhankor_Mhyさま
早々にご質問くださりありがとうございます。
ABCの処理は個別に実行する、が期待している挙動です。

Answer 1

②最初はmini_window_icon_wrap内の3枚の画像を表示しておき、一番上に重ねている1枚目の画像から2枚目までを順番に非表示にする処理を行う。

以下を削除

images.each(function (index) {
    if (index >= 1 && index < images.length - 1) {
        hideImage(index);
    }
});

---

④その後、あまり間隔を空けずに、続けて表示の処理を開始し、2枚目の画像→1枚目の画像、の順番で表示の処理を行う。

以下のように変更

if (animationDirection === 'forward') {
    if (currentIndex < images.length - 1) {
        hideImage(currentIndex);
        currentIndex++;
        animate();
    } else {
        console.log(currentIndex)
        animationDirection = 'backward';
        // currentIndex = images.length - 2;
        // setTimeout(hideImageStep, 150);
        animate();
    }
} else {
    if (currentIndex >= 0) {
        showImage(currentIndex);
        currentIndex--;
        animate();
    } else {
        animationDirection = 'forward';
        // currentIndex = 1;
        // setTimeout(showImageStep, 150);
        animate();
    }
}

Answer 2

1. 対象の<img>要素を含む配列を作る
2. 最初の<img>要素を表示、それ以外を非表示する
3. ループ処理でカウンタを加算する
4. ループ処理でカウンタと同じインデックスの<img>要素を表示、それ以外を非表示する

参考までに(実運用に合わせて調整はしてください)。

const imgs = [];
let index = 0;
setInterval(_ => {
  imgs.forEach((img, i) => {
    img.style.display = i === index? 'block': 'none';
  });
  index ++;
  index %= imgs.length;
}, 1000)

Comments

[chibikurochan]

@Refrainさま
早々にご回答くださりありがとうございます。
いただいたコードを少し調整して挙動を確認してみましたが、期待する挙動になりませんでした。

結果
https://capture.dropbox.com/uDni8fDVoDBt4aPS

調整後の記述
==========================================
$(function () {
const imgs = $('.mini_window_icon_wrap img');
let index = 0;
setInterval(() => {
imgs.each((i, img) => {
$(img).css('display', i === index ? 'block' : 'none');
});
index++;
index %= imgs.length;
}, 1000);
});
==========================================

以下が期待する挙動ですが、いずれも実現できていません。
==========================================
①画面を描画したら、すぐにアニメーションの処理を開始。
②最初はmini_window_icon_wrap内の3枚の画像を表示しておき、一番上に重ねている1枚目の画像から2枚目までを順番に非表示にする処理を行う。3枚目にはアニメーションを適用しない。
③上記の非表示処理が終わったとき、3枚目の画像は表示したままの状態が正しい。
④その後、あまり間隔を空けずに、続けて表示の処理を開始し、2枚目の画像→1枚目の画像、の順番で表示の処理を行う。
⑤表示の処理が終わったら、あまり間隔を空けずに、続けて②の処理から繰り返す。
==========================================

[Refrain]

手元で同じ環境が揃えられないので`<div>`で代用しますが、以下のようなイメージでしょうか？

```javascript
// 取り敢えず10個<div>作成
let div;
for (let i = 0; i < 10; i ++) {
div = document.createElement('div');
div.style.backgroundColor = 'red';
div.style.border = 'solid 1px black';
div.style.height = '300px';
div.style.left = `${i * 10}px`;
div.style.position = 'absolute';
div.style.top = `${i * 10}px`;
div.style.width = '400px';
document.body.appendChild(div);
}
// <div>の一覧
const divs = document.querySelectorAll('div');
// カウンタ変数cと変位量d
let counter = 0, delta = 1;
setInterval(_ => {
// 全部の<div>表示
divs.forEach((div, i) => {
div.style.display = (divs.length - i) > counter? 'block': 'none';
});
// 任意の範囲の<div>非表示
// for (let i = 0; i < counter; i ++)
// divs[divs.length - i - 1].style.display = 'none';
// カウンタ変数の計算
counter += delta;
// 折り返し地点に付いたら変位量を反転させる
if (counter === divs.length - 1 || counter === 0) delta *= -1;
}, 1000);
```

[chibikurochan]

回答ありがとうございます。
結論、イメージが異なります。
divの表示・非表示を繰り返し処理するのではなく、mini_window_icon_wrapクラスが付いたdivの中にあるimgタグの表示・非表示を繰り返す、が正しいです。
jsで要素の追加やスタイルを上書きしないとうまく挙動しない場合は例外としますが、
保守性を考慮して、基本的には、要素はhtml内にdivとimgを記述し、スタイルはscssファイル内に記述したいので、jsでのhtmlタグとスタイルの付与は考えていません。
jsには挙動の部分のみ記述したいです。

[chibikurochan]

<section class="hogehoge">
<div class="mini_window_icon_wrap">
<img
src="./assets/img/mini_window_icon_1.png"
alt=""
loading="lazy"
/>
<img
src="./assets/img/mini_window_icon_1.png"
alt=""
loading="lazy"
/>
<img
src="./assets/img/mini_window_icon_1.png"
alt=""
loading="lazy"
/>
</div>
</section>

説明にも記載していますが、htmlには実際上記の記述が3つ存在していて、各セクションのmini_window_icon_wrapクラスが付いたdivタグ内の画像に対して同じ処理を行いたいです。

[Refrain]

いえ、こちらの環境では`<img>`周りが全て用意出来なかったので、代替で`<div>`を使っています。
ご使用環境の目的のセレクターを使用しての`divs`に相当する要素を取得し、コードの改変を実施してください。

また、CSSを分離させたい場合には、`style`属性の操作ではなく`className`の操作などを実施し、`CSS`側で`display`などを定義すると良いかもしれません。