メニューボタン画像のロールオーバー時の処理について

質問

以下のスクリプトを用いてドロップダウンメガメニューを作成しています。
jQuery MegaMenu Plugin
http://www.geektantra.com/2010/05/jquery-megamenu-2/

このメニューのボタンを画像にし、ロールオーバー時には透過して背景が見えるようにしたいと考えています。
---------------------------------------
<script type="text/javascript" src="/_js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/_js/jquery.megamenu.js"></script>

<script type="text/javascript">

$(function() {
.find('img.btn').hover(
function(){
$(this).stop().animate({'opacity' : '0'}, 200);
},
function(){
$(this).stop().animate({'opacity' : '1'}, 500);
}
);
});
</script>

<ul id="megamenu">
<li>
<a><img src="../_images/btn_01.jpg" alt"ボタン1" class="btn"/></a>
<div>コンテンツA</div>
</li>
<li>
<a class="mm-item-link-hover"><img src="../_images/btn_02.jpg" alt"ボタン2" class="btn"/></a>
<div>コンテンツB</div>
</li>↑※このメニューにロールオーバーしている場合、class="mm-item-link-hover"がaに追加される。
<li>
<a><img src="../_images/btn_03.jpg" alt"ボタン3" class="btn"/></a>
<div>コンテンツC</div>
</li>
</ul>
-------------------------------------
上記のように記述して、ボタン画像にロールオーバーするとドロップダウンメニューが出現、さらにそのボタン画像が透過し、背景が見えるようにできました。
しかし、画像からマウスをおろしてドロップダウンメニューに移動すると透過が戻ってしまいます。

jquery.megamenu.jsの処理で、ドロップダウンメニューにロールオーバーしている間、class="mm-item-link-hover"がaに追加されています。
これを利用して、a.mm-item-link-hoverのなかのimg.btnを透過GIFに置き換えたいと思いましたが、うまく行きません。

【追加したスクリプト】
$(function() {
$("a.mm-item-link-hover").each(function() {
$("img.btn").attr("src", "/img/blank.gif");
});
});

上記の処理の方法は、考え方としては正しいでしょうか？
また、その場合のスクリプトはどのように書けばよろしいでしょうか？

ご教授頂けると非常に助かります。

回答No.3

fujillin · ベストアンサー

No.2です
連投失礼

$("a:first", this) でよかったですね。

お礼

御礼が遅れてすみません、ありがとうございました！

回答No.2

fujillin

No.1です。

＞$(this).stop().animate({'opacity' : '1'}, 500);
＞マウスが画像から離れるとアニメーションで透明度100％で表示させているなので、
＞style=で透明度1が指定されて透明になりません。
ＣＳＳで行なう場合は、class設定に対応して表示が行われるように、そのスクリプトをはずしておかないと、仰る通りうまく動作しません。

アニメーションを付けたいのであれば、img.btnに対してhoverを設定するのではなく、li要素に対してmouseenter、mouseleaveのイベントを設定してあげればお望みのようになりませんか？

http://api.jquery.com/mouseenter/

$(function(){
$("#megamenu > li").mouseenter(function(){
$(this).find("a:first").stop().animate({'opacity' : '0.2'}, 200);
}).mouseleave(function(){
$(this).find("a:first").stop().animate({'opacity' : '1'}, 200);
});
});

みたいな感じで。（未検証です）

回答No.1

fujillin

ご質問文の文章を読んだだけで、内容は見てませんが、

＞ドロップダウンメニューにロールオーバーしている間、class="mm-item-link-hover"
＞がaに追加されています。
classが設定されている間だけ透過になればよいのなら、ＣＳＳで透明度の設定をしておくのではダメなのですか？
それとも、違う意味なのでしょうか。

＞$(function() {
＞$("a.mm-item-link-hover").each(function() {
＞$("img.btn").attr("src", "/img/blank.gif");
＞});
＞});
どのタイミングで実行しようとしているのか不明ですが、まずは $(function(){ ～ の意味を調べてみてください。
「透明に」って、画像を入替えるって意味だったのですか？
透明度を変えるという意味ではなかったのでしょうか？

通常「ロールオーバー」というと、マウスを離せば元に戻る動作をイメージすると思いますが、戻す処理はいらないのでしょうか？
CSSでなくスクリプトで処理するにしても、ロールオーバー処理に向いている element.hover( )　とか element.toggle( )　ってのがあったような気がします。

＜ご参考まで＞
http://api.jquery.com/

お礼

>ＣＳＳで透明度の設定をしておくのではダメなのですか？
最初にそれを思いついて試したのですが、CSSで「.mm-item-link-hover img」に透明度を指定していても
function(){
$(this).stop().animate({'opacity' : '1'}, 500);
}
でマウスが画像から離れるとアニメーションで透明度100％で表示させているなので、style=で透明度1が指定されて透明になりません。
画像にマウスオーバー→画像を見えなくする（透明化or透過gifに置き換え）
画像からもドロップダウンからもロールオフ→画像を100％表示
としたいのですが、方法はありますでしょうか？