【jQuery】hoverでslideDown/slideUpを実装したい

前提・実現したいこと

現在のコードからhoverするとslideDown、hoverがはずれるとslideUpしたいです。
また、slideDownの際（現在はフェードイン）に.4秒遅れて実装されるようにしていますが、
slideUpの際も同様に.4秒遅れて実装させたいです。

ご教示の程、宜しくお願い致します。

該当のソースコード

<div id="header_bg"></div>
<header id="header">
	<nav id="gnavi">
		<ul>
			<li>
				<a href="javascript:;">タイトル</a>
				<div class="subnavi">サブナビ</div>
			</li>
			<li>
				<a href="javascript:;">タイトル</a>
				<div class="subnavi">サブナビ</div>
			</li>
			<li>
				<a href="javascript:;">タイトル</a>
				<div class="subnavi">サブナビ</div>
			</li>
		</ul>
	</nav>
</header>

$(function(){
	var moveElm = $('#gnavi > ul > li');
	moveTimer = 0;
	hideTimer = 0;

	moveElm.hover(function(){
		var self = $(this),
		selfMdd = self.find('.subnavi');

		self.on('mousemove', function(){

			clearTimeout(moveTimer);
			clearTimeout(hideTimer);

			moveTimer = setTimeout(function(){
				self.addClass('mddActive');
				selfMdd.css({display:'block'}).stop().animate({opacity:'1'},200,'swing');
				$("#header_bg").stop().fadeIn();

				self.siblings('li').removeClass('mddActive');
				self.siblings('li').find('.subnavi').stop().animate({opacity:'0'},function(){
					$(this).css({display:'none'});
				});
			}, 400);
		});
	},function(){
		var self = $(this),
		selfMdd = self.find('.subnavi');

		clearTimeout(moveTimer);

		hideTimer = setTimeout(function(){
			self.removeClass('mddActive');
			selfMdd.css({display:'none'});
			$("#header_bg").stop().fadeOut();
		}, 400);
	});

	$('#gnavi > ul').hover(function(e){
		e.preventDefault();
	},function(){
		$('#gnavi > ul > li').removeClass('mddActive').find('.subnavi').stop().animate({height:'0',opacity:'0'});
	});
});

#header_bg {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 40;
	filter: alpha(opacity=70);
	-moz-opacity: 0.70;
	opacity: 0.70;
}
#header {
	position: fixed;
	top: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 0 94px;
	background: #fff;
	z-index: 100;
	box-shadow: 0 -20px 20px 20px rgba(0,0,0,0.4);
}
#header #gnavi {
	margin: 0 auto;
	box-sizing: border-box;
	max-width: 1200px;
	height: 65px;
}

#header #gnavi > ul {
	display: flex;
	justify-content: space-between;
}
#header #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;
}
#header #gnavi .subnavi {
	display: none;
	position: absolute;
	top: 130px;
	right: 0;
	left: 0;
	width: 100%;
	height: auto !important;
	margin: auto;
	background: #fff;
	box-shadow: 0 15px 15px -15px rgba(0,0,0,0.4) inset;
}

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

回答1件

javascript
1$(function(){
2  $('.subnavi').hide();
3  $('#gnavi li').hover(function(){
4    $(this).find('.subnavi').delay(300).slideDown();
5  },function(){
6    $(this).find('.subnavi').delay(300).slideUp();
7  });
8});