【问题标题】：Delay fadeOut menu jquery延迟淡出菜单jQuery
【发布时间】：2015-09-01 06:06:27
【问题描述】：

我是 Jquery 的新手，我正在尝试制作一个菜单，以便在悬停时使用淡入淡出显示，当鼠标离开时开始延迟，然后使用淡出关闭菜单。

到目前为止我的代码... 我也做了一个 jsFiddle JSFIDDLE

$('#menu > li').on('mouseover', function(e){
  $(this).find("ul:first").stop().fadeIn(120);
  $(this).find('> a').addClass('active');
}).on('mouseout', function(e){
  $(this).find("ul:first").stop().delay(2000).fadeOut(120);
  $(this).find('> a').removeClass('active');
});

【问题讨论】：

小提琴奏效（ul 在 2 秒后消失）。有什么问题？
悬停选择菜单时出现问题；

标签： jquery menu delay fadeout

【解决方案1】：

改变delay和stop的顺序，使用更长的fadeOut持续时间。

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

演示：http://jsfiddle.net/tusharj/YGB5G/39/

编辑

您也可以使用hover，如下：

$('#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');
});

演示：http://jsfiddle.net/tusharj/YGB5G/43/

【讨论】：

【解决方案2】：

通过使用愚蠢的方式你可以做淡出。

$("#row_id").fadeOut('slow',function(){ $(this).remove(); });

你也可以用毫秒来代替不带''的'slow'。

【讨论】：

【解决方案3】：

您也可以使用纯 CSS 使用 transition property 和 :hover 选择器来实现此目的。诀窍是您需要使用opacity:0; 属性而不是display:none; 来隐藏您的子菜单，因为您不能在display 属性上应用过渡。

#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
}

演示：http://jsfiddle.net/YGB5G/42/

还要注意，第二级下拉菜单的显示方式相同。在其他答案中情况并非如此。

编辑

您可以使用 transition-delay: Xs; 为鼠标移出效果添加 X 秒的延迟。请参阅this 帖子。这是您的代码演示：http://jsfiddle.net/YGB5G/44/

【讨论】：