【Js】遅延式のドロップダウンメニュー

ドロップダウンメニューでボタンとホバー時に出てくるメニューの間に隙間があるとそこを通るたびにホバーが外れた認識されてメニューが閉じてしまうのでjsで一定時間はホバーが外れても表示し続けられるようにした時のメモ

jsを使ってドロップダウンメニューのホバーを制御する

HTMLコード

<div class="btn">
	<span>これはボタン</span>
	<ul class="hide">
		<li><a href="#">ドロップダウンメニュー</a></li>
		<li><a href="#">ドロップダウンメニュー</a></li>
		<li><a href="#">ドロップダウンメニュー</a></li>
	</ul>
</div>

jQueryコード

jQuery(function($){
    moveTimer = 0;
    hideTimer = 0;
    // ホバーしている時
    $('.btn').hover(function () {
        menu = $(this).find('ul');
        // 指定の要素内でマウスが動いている時
        $(this).on('mousemove', function(){
            // タイマーの解除
            clearTimeout(moveTimer);
            clearTimeout(hideTimer);
            // タイマーのセット(マウスが外れて○秒後にhideを削除)
            moveTimer = setTimeout(function(){
                menu.removeClass('hide')
            }, 100);
        });
    // ホバーが外れている時
    },function(){
        menu = $(this).find('ul');
        // タイマーの解除
        clearTimeout(moveTimer);
        // タイマーのセット(マウスが外れて○秒後にhideを追加)
        hideTimer = setTimeout(function(){
            menu.addClass('hide')
        }, 500);
    });
});