jQuery　数秒遅れてドロップダウンを表示させたい

前提・実現したいこと

グローバルナビを作成しており、
タイトルにhoverしたらドロップダウンでサブナビが表示されるという仕組みです。
ただ、マウスを乗せた瞬間・はずれた瞬間にドロップダウン・アップが挙動してしまい、
使いづらい状態です。
なので、hoverしてからコンマ3秒ほど後にドロップダウンを出したいのですが、
どのように修正すればよいでしょうか？
ご教示の程、宜しくお願い致します。

該当のソースコード

$(function(){
	$(".sub").hide();
	$("#hg").hide();
	$("#gnav > ul > li").hover(function(){
	$(".sub:not(:animated)", this).slideDown(500);$("#hg").stop().fadeIn();},
	function(){
		$(".sub",this).slideUp(200);
		$("#hg").stop().fadeOut();
	});
});

<div id="hg"></div>
<nav id="gnav">
<ul>
<li>
<a href="#">タイトル1</a>
<div class="sub">サブナビ1</div>
</li>
<li>
<a href="#">タイトル2</a>
<div class="sub">サブナビ2</div>
</li>
<li>
<a href="#">タイトル3</a>
<div class="sub">サブナビ3</div>
</li>
</ul>
</nav>

補足

「#hg」はhoverすると画面全体にかかる半透明のマスクです

試したこと

delayでの遅延は試しましたが、hoverした回数分だけ反応してしまい、
サブナビやマスクがちかちかして使いづらい結果となりました。

行動規範の内容に同意します

回答1件

ベストアンサー

hoverしてからコンマ3秒ほど後

えらい短いな。
コンマ3秒遅らすことは下記の方法で可能
ただしそれと「チラつかせない」は別の問題。

javascript
1$(function(){
2    $(".sub").hide();
3    $("#hg").hide();
4    $("#gnav > ul > li").hover(function(){
5    $(".sub:not(:animated)", this).delay(300).slideDown(500);$("#hg").stop().fadeIn();},
6    function(){
7        $(".sub",this).slideUp(200);
8        $("#hg").stop().fadeOut();
9    });
10});