- 締切済み
jqueryのロールオーバーについて
jqueryのロールオーバー設定に関してご質問です。 あるサイトのコーディングを行ってます。 サイト内のナビーゲーションボタンを瓶の画像でまとめてます。 各瓶の画像にリンクを付け、 マウスを乗せるとその瓶が開いた画像が 切り替わりでフェードインの感じで出てくるという設定を目指しているのですが、 うまくいきません。 色々やった結果マウスを当てると、 切り替わりで空いた瓶がフェードで出るのですが、 その画像奥に閉じた瓶がそのまま残ってて重なってる感じです。 こちらはどのようにすれば上手く画像奥の瓶は消えるのでしょうか？ ちなみに画像はpngです。 フェードの切り替わりは是非そのまま使用したいと考えてます。 あとマウスを外せばまた閉じた瓶がフェードで出るという感じを目指してます。 どなたかご教示いただいてもよろしいでしょうか？ 一応下記htmlとjsコードも載せておきます。 ▼html <script src="../lib/jquery1.8.1.min.js"></script> <script src="../js/jquery.tgImageRollover.js"></script> <script type="text/javascript"> jQuery(function(){ $(this).tgImageRollover({ selector : 'img.rollover', // セレクタ ←(7) attach : '_on', // ファイル名末尾句 ←(8) onFadeTime : 600, // カーソルON時のアニメーション時間 ←(9) offFadeTime : 400 // カーソルOFF時のアニメーション時間 ←(10) }); }); </script> <a href="#"><img class="rollover" src="../img/nav01.png" alt="" width="100" height="50"></a> <a href="#"><img class="rollover" src="../img/nav02.png" alt="" width="100" height="50"></a> ▼jquery.tgImageRollover.js ;(function($){ $.fn.tgImageRollover = function(options){ var opts = $.extend({}, $.fn.tgImageRollover.defaults, options); $(opts.selector).each( function(){ this.onImage = $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+ opts.attach +"$2"); this.onHtml = $('<img src="'+this.onImage+'" alt="" style="position:absolute; opacity:0;">'); $(this).before(this.onHtml); $(this.onHtml).hover( function(){ $(this).stop().animate({'opacity': '1'}, opts.onFadeTime); }, function(){ $(this).stop().animate({'opacity': '0'}, opts.offFadeTime); } ) } ) } // default option $.fn.tgImageRollover.defaults = { selector : 'img.rollover', attach : '_on', onFadeTime : 600, offFadeTime : 400, }; })(jQuery);
- gekikarakid
- お礼率87% (7/8)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
ANo1です。 ＞イベントの設置対象を親のリンク要素などにしておく、 ＞というのがいまいち飲み込めないのですが イベント発生対象要素に指定しているものが非表示や透過になったりすると、イベントが発生しなくなったりmouxeoutが発生したりすることになるので、イベントの対象を（操作しない）親要素にしておいた方が良いですという意味です。 ご提示の仕組みですと、最終的にリンク要素の中に２つの画像を重ねておいて、片方をフェードイン、もう一方をフェードアウトするようなイメージだと思いますが、その部分についての簡略化したサンプルを以下に。 ※リンク目的ではないようですので、親要素がリンクタグである必然性はないと思いますが、とりあえずそのまま。 ※サンプルなので、クロスブラウザ等も配慮していません。あくまで考え方のサンプルです。 ※簡略化のためidを設定しています。 （全角空白は半角に） <!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"> <style type="text/css"> #hoge img { width:100px; height:50px; } #hoge img:first-child { position:absolute; opacity:0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var time = 500; var changeImage = function(elem, o){ $("img", elem).stop() .filter(":first-child").animate({ opacity: o}, time) .next("img").animate({ opacity: 1-o}, time); }; $("#hoge").hover( function(){ changeImage(this, 1) }, function(){ changeImage(this, 0) } ); }); </script> </head> <body> <p> <a href="#" id="hoge"> <img src="./img/nav01_on.png" alt=""> <img src="./img/nav01.png" alt=""> </a> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
こんにちは。 ＞こちらはどのようにすれば上手く画像奥の瓶は消えるのでしょうか？ 推測ですが、上にフェードイン表示させている画像が透過pngなので下の画像が透けて見えてしまっているのではないでしょうか？ 一つの解決策として、透過部分を背景色で塗りつぶした画像にしておけば、そのままで動作するのではないかと思います。 スクリプトで解決するならば、フェードインに合わせて他方の画像をフェードアウトさせるようにすれば、ご希望のように見えると思います。 ただし、この場合では、フェードアウトするとmouseleaveが発生してしまいますので、イベントの設置対象を親のリンク要素などにしておく必要があると思います。
お礼
ご回答ありがとうございます。 状況説明が抜けてましたが、 背景には画像を入れてますので png画像の背景を塗りつぶすのは難しいです。 fujillin様が言われてるとおり、 png画像の透過部分がそのまま表示され、 奥の画像が写ってる状態だと自分も思います。 奥の画像にフェードアウトを設定すると、 今度は奥の画像がマウスを外しても戻ってこなくなり、 元々jQueryをきちんと把握してないのもあり、 何がなんだかの状態に陥ってきてます。汗 ご回答いただいてた最後の部分の イベントの設置対象を親のリンク要素などにしておく、 というのがいまいち飲み込めないのですが もう少しわかりやすく言っていただくことは可能でしょうか？
お礼
丁寧にソースまで書いていただきありがとうございます。 ちょっと私事ですぐに作業に取り掛かれないのですが、 こちらのほう是非参考にさせていただきます。 ありがとうございました！！