Posted at

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

More than 3 years have passed since last update.

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;
}


サンプル