LoginSignup
8

More than 5 years have passed since last update.

jQueryを用いた画像のクロスフェード処理

Posted at

jQuery使って、background-imageをanimateで変更すればできるやろー、ぐらいに思っていたのだけどどうやらできない模様。
なので画像をあらかじめ2枚用意しておき、透過率を交互に変えることによりクロスフェードを実現する。

サンプルソース

JavaScript
$(function(){
  var CHANGE_TIME  = 3000; // 次の画像に切り替わるまでの時間(ms)
  var ANIMATE_TIME = 1000; // フェードアニメーションの時間(ms)
  var images = ['test01.jpg','test02.jpg','test03.jpg']; // 画像配列
  var index = 0;
  function crossfade_image() {
    // 現在アクティブな画像をフェードアウトする
    $("img.active").animate({'opacity': 0}, ANIMATE_TIME, "linear", function(){
      // アクティブな画像のフェードアウト処理完了時
      // 非アクティブだった画像にactiveクラスを追加し、アクティブな画像に設定する
      $('img:not(".active")').addClass('active');
      // アクティブだった画像のsrc属性を次の画像ファイルへ切り替え、非アクティブな画像に設定する
      $(this).attr('src', images[index % images.length]).removeClass('active');
      index++;
    });
    // 現在非アクティブな画像をフェードインする
    $('img:not(".active")').animate({'opacity': 1.0}, ANIMATE_TIME);
    setTimeout(crossfade_image, CHANGE_TIME);
  }
  // bodyにimgタグを埋め込む
  $("body")
    .append($("<img>").attr("src", images[index++]).addClass("active")) // 初期表示で1枚目の画像をアクティブ画像として設定する
    .append($("<img>").attr("src", images[index++]).css({'opacity': 0})); // 初期表示で2枚目の画像を透過率0(透明≒非表示)の非アクティブな画像として設定する
  setTimeout(crossfade_image, CHANGE_TIME);
});
CSS
img {
  position: absolute;
  top: 0;
  left: 0;
}

サンプル

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8