画像をフェードインしながら切り替えたい方法

2010/09/08 13:09

このQ&Aのポイント

フェードインしながら画像を切り替える方法についてアドバイスをお願いします。
現在の実装コードとしては、マウスオーバー時に画像を切り替えていますが、即座に切り替わってしまいます。フェードインしながら切り替える方法を教えてください。
リンク先のコードを使用して、画像をフェードインしながら切り替える方法についてアドバイスをいただきたいです。

you_c
お礼率8% (8/97)

HTML
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2010/09/08 15:02 回答No.2

HTML5の<canvas>を使おうと、思ったけどIEだとcanvasでopacity操作出来ないし、<td>の中に<canvas>入れてよいのやら調べるの後にしてとりあえず、jQueryを使って安直に... <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> <script type="text/javascript"> $(function(){ 　 $(".thumbnail").mouseover(function(){ 　 $("#myPIC").hide(); 　 $("#myPIC").attr("src",$(this).parent().get(0).href); 　 $("#myPIC").fadeIn("slow"); 　}); 　$(".thumbnail").click(function(){ 　 return false; 　}); }); </script> <body> <table bgcolor="#000000" width="800" align="center" border="2"> <tr align="center"> <td width="150" align="center">  <a href="画像リンク1"><img src="画像1" width="130" class="thumbnail"></a> <a href="画像リンク2"><img src="画像2" width="130" class="thumbnail"></a> <a href="画像リンク3"><img src="画像3" width="130" class="thumbnail"></a> <a href="画像リンク4"><img src="画像4" width="130" class="thumbnail"></a> </td>  <td width="650"><BR> <img id="myPIC" src="最初に表示される大きい画像" style=" margin:10px 25px 30px 25px;"> </td> </tr></table> </body>