- 締切済み
jqueryについて
サムネイルをマウスオーバーすると#targetに拡大画像を表示するものなのですがマウスオーバーで 切り替わりマウスアウトで元に戻るとこまではいいのですがフェードが全く効きません。 いろいろ試したところ$(".thumbnail a img")に変えるとフェードはするのですが今度は画像が 切り変わらなくなってしまいす。両者実装するにはどのように書き換えればいいのでしょうか？ $(document).ready(function() { var originSrc = $("#target").attr("src"); $(".thumbnail a") .fadeTo(1,1) .hover( function() { var changeSrc = $(this).attr("href"); $("#target").attr("src", changeSrc); $(this).fadeTo(200, 0.5); }, function() { $("#target").attr("src", originSrc); $(this).fadeTo(500, 1); } ) });
- dcx147
- お礼率33% (214/636)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
回答がないみたいなので… jqueryはよく知らないのと、ソースが不明なのでよくわかりませんが、ひょっとしてこういうこと？ $(document).ready(function() { $(".thumbnail a").each(function(){ var originSrc = $("#target").attr("src"); $(this).hover( function(){ $("#target").attr("src", $(this).attr("href")); $(this).fadeTo(200, 0.5); }, function(){ $("#target").attr("src", originSrc); $(this).fadeTo(500, 1); }); }); }); HTMLソースはこんなの（↓）を想定 リンクタグの目的がわかりませんが、このままだと画像をクリックするとその画像にリンクしてしまうのでは？ <html> <head> <style type="text/css"> img#target { width:500px; height:300px; } .thumbnail img { width:125px; height:75px; } </style> </head> <body> <img id="target" src="A.jpg"> <div class="thumbnail"> <a href="B.jpg"><img src="B.jpg"></a> <a href="C.jpg"><img src="C.jpg"></a> <a href="D.jpg"><img src="D.jpg"></a> </div> </body> </html>
