このサンプルは、jQueryのfadeIn/fadeOutメソッドを利用してイメージをフェイドアウト/フェイドインさせながら切り替えます。サンプルが表示されたら[FadeOut/FadeIn Image !]ボタンをクリックしてください。イメージがフェイドしながら切り替わります。
fadeIn()をイメージのloadイベントで行うのがポイントです。
$('#btnSwitch').click(function () {
$('#bug').fadeOut(2000, function () {
$(this).load(function () {
$(this).fadeIn(2000);
});
var src = $(this).attr('src');
if (src.lastIndexOf('bug1.jpg') != -1) {
$(this).attr('src', 'jQuery/fadeoutFadeinImage/bug2.jpg');
} else {
$(this).attr('src', 'jQuery/fadeoutFadeinImage/bug1.jpg');
}
});
});