延迟淡出菜单 jquery

Question

我是 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');
});

Answer 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/

Answer 2

使用下面的方法你可以做fadeOut。

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

您也可以使用以毫秒为单位的时间代替 'slow' 而不带 ''。

Answer 3

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

#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; 为 mouseout 的效果添加 X 秒的延迟。参见 this post. Here a demo with your code: http://jsfiddle.net/YGB5G/44/

延迟淡出菜单 jquery

Delay fadeOut menu jquery

jquery

menu

delay

fadeout

编辑