【jQuery】ナビゲーションにhoverした時の:not(:animated)の挙動について

#gnavi > ul > li > a にhoverした時に、subnaviがドロップダウンで表示＆画面全体に黒い半透明のマスクがかかるのが理想です。ですがaタグのhoverを繰り返すと、その回数分だけ半透明のマスクがちかちかと表示されてしまいます。
hoverした時だけマスクを表示させたいのですが、以下のコードから修正する方法はありますでしょうか。
何卒ご教授のほど、よろしくお願い致します。

【HTML】
<nav id="gnavi">
<ul>
<li>
<a href="javascript:;"><span>タイトル</span></a>
<div class="subnavi">コンテンツ</div>
</li>
<li>
<a href="javascript:;"><span>タイトル</span></a>
<div class="subnavi">コンテンツ</div>
</li>
<li>
<a href="javascript:;"><span>タイトル</span></a>
<div class="subnavi">コンテンツ</div>
</li>
</ul>
</nav>

【jQuery】
$(function(){
$(".subnavi").hide();
$("#header_bg").hide(); //#header_bgが半透明マスクです
$("#gnavi > ul > li").hover(function(){
$(".subnavi:not(:animated)", this).slideDown(500);$("#header_bg").fadeIn();},
function(){
$(".subnavi",this).slideUp(100);
$("#header_bg").fadeOut();
});
$("#gnavi > ul > li").click(function(){
$(".subnavi:not(:animated)", this).slideToggle(500);$("#header_bg").fadeToggle();},
function(){
$(".subnavi",this).slideToggle(500);
$("#header_bg").fadeToggle();
});
$("#header_bg").click(function(){
$(".subnavi").slideUp(100);
$("#header_bg").fadeOut();
});
});

No.1 回答者： fujillin 回答日時： 2020/09/28 17:48

こんにちは

肝心の#header_bgがどうなっているのかが、まったく示されていないので、考えようがありませんが、以下は、勝手な想像に基づく回答です。
違っている場合はスルーしてください。


想像するところ#header_bgはposition:absoluteなどにして画面いっぱいの背景色（または画像）などを半透明にして表示しているのではないかと推測。
（↑）このような仕組みにしておくと、hoverが発生して#header_bgが表示された瞬間に、そちらが前面にくることになるので、元の要素に対してmouseoutが発生します。
すると、#header_bgが消されて再びhoverが発生・・・ということの繰り返し。
・・・これによってチラチラしているのではないかと。
ですので、まずは#gnaviが#header_bgよりも前面に位置するようにCSS等で制御しておいてください。

次に、項目間をマウスで撫でると、上記と似たような事象（mouseon-outの繰返し）が発生することになるので、こちらもまたチラつきの原因になるものと想像されます。
これに関しては、一旦、アニメーションのキューをクリアして、新しいアニメーションを始めるようにすることで、かなり抑えることができるはずです。（操作への反応なので、そういう操作をする限り、完全にはなくなりませんが…）
具体的には、
　$("#header_bg").fadeIn();
　　　↓　↓
　$("#header_bg").stop().fadeIn();
といった要領です。（他も同様）

この回答へのお礼

#header_bg部分が抜けておりました…申し訳ありません。
おっしゃる通り画面いっぱいに背景色が表示される仕組みになっております。

jQueryに.stop()を追記したところ、思ったとおりのアニメーションになりました！
とても助かりました！ありがとうございました！

お礼日時：2020/09/29 15:50