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);
補足
失礼しました。 http://suzken.com/2010/10/jquery-img-anime.html http://phpspot.org/blog/archives/2010/04/1jquerynews_tic.html なにぶん分かっていないもので、説明が難しいのですが、上記2サイト様の動きを同時にやりたいのです。 オンマウス時に画像が動き、それに合わせて1文字ずつ表示される… もちろん離した後は文字も消えて、再びあてれば表示される。 といった感じなのです