サムネイル画像をクロスフェードで切り替えたい

質問

大きい画像(画像A)と、その下にサムネイル画像(画像B、画像C)があり、各サムネイルをマウスオンすると
クロスフェードで大きい画像の部分にそれぞれの拡大画像を表示して、

マウスを画像から離すと元の画像Aがまた表示されるようにしたいのですが、どうすればよろしいでしょうか。

画像をマウスオンで切り替えるだけなら検索で出てくるのですが、
マウスオンで各画像がクロスフェードで切り替わるという点とマウスを離すと元の画像に戻るという部分が
なかなか見つからなく苦労しております。

どなたかどうぞよろしくお願いいたします。

回答No.1

siro karasu（@whiteRaven） · ベストアンサー

--jQuery-----------

$(function() {
$('#change').html('<img id="fade" src="画像Ａ" />'); //画像Ａ
$('#fade').show();

$('#mouseOnChange>ul>li>img').hover(function(){
$('#fade').fadeOut('slow')
var imgSrc = $(this).attr('alt');
$('#change').html('<img id="fade" src="'+imgSrc+'" />')
$('#fade').fadeIn('slow')
},function(){
$('#fade').fadeOut('slow')
$('#change').html('<img id="fade" src="img/img01.jpg" />')
$('#fade').fadeIn('slow')
})
});

--jQuery-----------
--css--------------
p{
margin:0px;
padding:0px;
}
#fade{
display:none;
}
#mouseOnChange ul,li{
margin:0px;
padding:0px;
}
#mouseOnChange ul{
list-style:none;
}
#mouseOnChange ul li{
float:left;
}
--css--------------
--html-------------

<div id="mouseOnChange">
<div id="change"></div>
<ul>
<li><img src="画像Ａサムネ" alt="画像Ａ" width="100px" height="66px" /></li>
<li><img src="画像Ｂサムネ" alt="画像Ｂ" width="100px" height="66px" /></li>
<li><img src="画像Ｃサムネ" alt="画像Ｃ" width="100px" height="66px" /></li>
</ul>
</div>

--html-------------

↑では、画像A～Cのサムネと、それぞれの画像が別画像だと仮定し、altに画像のURLを入力するようにしてます。

.hover()で、マウスのオンオフを検出
.fadeIn() .fadeOut() を使用するために、あらじめ #fade を display:none 。

あとは、消したり出したり書き換えたり、書き込んだりしてます。

こんなんじゃだめでしょうか？

お礼

ご返事が遅くなり申し訳ございません。
こちらで実装をしてみたいと思います。
御丁寧なご説明ありがとうございました!