締切済み

yuga.jsのロールオーバーをフェードインで表示

2013/02/05 18:25

yuga.js 0.7.2を使用しています。ロールオーバーさせる時に、フェードアウト→フェードインで画像の切り替え表示をしたいと思っています。もし分かる方がいましたら、そのコードを教えて頂けますでしょうか。可能であれば、 yuga.js本体には追記しない方法（別途common.js等に記述）があればと思います。よろしくお願いいたします。

moon333
お礼率87% (28/32)

JavaScript
回答数1
ありがとう数0

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

みんなの回答

fujillin
ベストアンサー率61% (1594/2576)

2013/02/06 20:03 回答No.1

yuga.jsはまったく知りませんが、jQueryベースみたいなのでjQueryでのサンプルです。方法はいろいろあると思いますので、一例です。　*　class="fade"の画像が対象。　*　画像の拡張子はとりあえず.jpg .gif .pngの3種類にしてあります。　*　速度はデフォルトになっているので、適当に設定しなおしてください。（全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> </head> <body> <p><img src="A.jpg" alt="" class="fade"> <p><img src="B.jpg" alt="" class="fade"> <p><img src="C.jpg" alt="" class="fade"> <script type="text/javascript"> (function(){ 　$("img.fade").hover( 　　function(){ fade.call(this, 1); }, 　　function(){ fade.call(this, 0); } 　); 　function fade(c){ 　　var obj = $(this); 　　var src = obj.attr("src"); 　　obj.stop().animate({opacity: 0}, function(){ 　　　src = src.replace(/_on\.(jpg|gif|png)$/, "\.$1"); 　　　if(c) src = src.replace(/\.(jpg|gif|png)$/,"_on\.$1"); 　　　obj.attr("src", src).animate({opacity: 1}); 　　}); 　} })(); </script> </body> </html>

ログインすると、全ての回答が全文表示されます。