延迟淡出菜单jquery

我是Jquery的新手，我正在尝试制作一个菜单，在鼠标悬停时用fadeIn显示，在鼠标离开时开始延迟，然后用fadeout关闭菜单

我的代码到目前为止。。。 我也做了一件事

$（'#menu>li'）。打开（'mouseover'，函数（e）{
$（this.find（“ul:first”）.stop（）.fadeIn（120）；
$（this.find（'>a'）.addClass（'active'）；
}).on（'mouseout'，函数（e）{
$（this）.find（“ul:first”）.stop（）.delay（2000）.fadeOut（120）；
$（this.find（'>a'）.removeClass（'active'）；
});更改
延迟
和
停止
的顺序，并使用更长的
衰减
持续时间

$(this).find("ul:first").delay(2000).stop().fadeOut(500);

演示：

编辑

您还可以使用
悬停
，如下所示：

$('#menu > li').hover(function (e) {
    $(this).find("ul:first").finish().fadeIn(120);
    $(this).find('> a').addClass('active');
}, function (e) {
    $(this).find("ul:first").finish().delay(1000).fadeOut(1000);
    $(this).find('> a').removeClass('active');
});

演示：
通过使用愚弄的方式，您可以进行淡出

$（“行id”）.fadeOut（'slow'，function（）{
$（this.remove（）；
});

您也可以使用毫秒来代替不带“”的“慢”时间。
您也可以使用纯css，使用
转换
和
：hover
选择器来实现这一点。诀窍是你需要使用
opacity:0属性而不是
显示：无
隐藏子菜单，因为无法在
显示
属性上应用转换

#menu ul, #menu2 ul {
...
transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
opacity:0;
}
#menu li:hover > ul, #menu2 li:hover > ul {
    opacity:1
}

演示：

还请注意，第二级下拉菜单的显示方式相同。其他答案则不然

编辑
您可以使用
转换延迟：Xs
为鼠标输出效果添加X秒延迟。见下文。这是一个带有代码的演示：
小提琴工作（ul在2秒后淡出）。问题是什么？当您悬停并选择菜单时出现问题；