【jQuery】画像を1枚ずつフェードインする方法

画像を効果的に表示するための方法として、フェードインは非常にポピュラーです。この記事では、jQueryを使って、画像を1枚ずつフェードインさせる方法と、その処理をループさせる方法を紹介します。

HTML

<div id="imageContainer">
  <img src="path/to/image1.jpg" class="fade-in" alt="Image 1">
  <img src="path/to/image2.jpg" class="fade-in" alt="Image 2">
  <!-- 他の画像も追加可能 -->
</div>

CSS

.fade-in {
  opacity: 0;
}

jQuery

$(document).ready(function() {
  let $images = $('#imageContainer .fade-in');
  function fadeInNextImage(index) {
    if (index < $images.length) {
      $($images[index]).animate({opacity: 1}, 500, function() {
        fadeInNextImage(index + 1);
      });
    } else {
      $images.css('opacity', 0);
      fadeInNextImage(0);
    }
  }
  fadeInNextImage(0);
});

この方法では、最後の画像がフェードインした後に、すぐに全ての画像を非表示にし、再びフェードインの処理が開始されます。

まとめ

以上、jQueryを使用した画像のフェードインアニメーションについての簡単な解説でした。この手法を使えば、Webページにダイナミックなビジュアル効果を追加することができます。ぜひ試してみてください！