【jQuery】hoverするとコンマ秒後にイベントを実行する

Question

前提・実現したいこと

ナビゲーションにsetTimeoutを使用して、
コンテンツ名にhoverしたらコンマ秒だけ遅れて以下を実装させたいです。
・サブナビをドロップダウンで表示
・画面全体に半透明のマスクがかかる

半透明のマスクはコンマ秒遅れて実装されますが、肝心のサブナビが表示されません…
jQueryの知識が乏しいため、どこが悪いのかが分かっておりません。
ご教示の程、何卒宜しくお願い致します。

該当のソースコード

【jQuery】

$(function() {
	$("#gnavi > ul > li").on({
		"mouseenter":function(){
			sethover = setTimeout(function(){
				$(this).next('div').stop().slideDown(500);
				$('#header_bg').stop().fadeIn();
			},500);
		},
		}).parent().on({
		"mouseleave":function(){
			sethover = setTimeout(function(){
				$('>a+div', this).stop().slideUp(500);
				$("#header_bg").stop().fadeOut();
				clearTimeout(setleave);
			},300);
		}
	});
});

【HTML】

<div id="header_bg"></div>
<header id="header">
	<nav id="gnavi">
		<ul>
			<li>
				<a href="">コンテンツ名</a>
				<div class="subnavi">サブナビ</div>
			</li>
			<li>
				<a href="">コンテンツ名</a>
				<div class="subnavi">サブナビ</div>
			</li>
			<li>
				<a href="">コンテンツ名</a>
				<div class="subnavi">サブナビ</div>
			</li>
		</ul>
	</nav>
</header>

【CSS】

#header_bg {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: -10;
	opacity: 0.7;
}
#gnavi {
	position: relative;
	margin: 0 auto;
	box-sizing: border-box;
	max-width: 1200px;
	height: 65px;
}
#gnavi > ul {
	display: flex;
	justify-content: space-between;
}
#gnavi > ul > li > a {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 65px;
	padding: 0 1em;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.25em;
	color: #000;
	margin-bottom: 65px;
}
#gnavi li > a + div {
	display: none;
	position: absolute;
	top: 130px;
	right: 0;
	left: 0;
	width: 100%;
	margin: auto;
	background: #fff;
	box-shadow: 0 15px 15px -15px rgba(0,0,0,0.4) inset;
}

試したこと

$("#gnavi > ul > li").on({ を $("#gnavi > ul > li a").on({ にしても
うまくいきませんでした。

Comments

[yambejp]

setleaveってなんでしょう？

[rightbrain]

他サイトを参考に作成しているのですが、setleaveはそのまま引用しています。
変更が必要なのか分からずそのままにしてあります…

Answer 1

gnaviのhover処理でそれより上位の#header_bgの表示を付け替えしてしまったら
liの位置がずれてhoverとしてはきちんと処理ができないでしょう。
nextの使い方も変ですし、hoverの遅延だとUIが最悪だと思います

Comments

[yambejp]

とりあえず
$("#gnavi > ul > li").hover(
function(){
$(this).find('div').stop().delay(500).slideDown();
},
function(){
$(this).find('div').stop().delay(500).slideUp();
}).find('div').hide();

[rightbrain]

ご指摘ありがとうございます。
そうなんですね…
それでは、#gnaviと#header_bgの処理は別々で記述したほうが良いということでしょうか。

[yambejp]

hoverするとずれてhoverがはずれるので、hoverで自分より上位の表示切り替えはNGでしょう

[rightbrain]

知らないルールがたくさんありjQueryの知識不足を実感しております…
わざわざご回答いただきありがとうございます。
今回は諦めるか他の方法を探してみようと思います。