修改

Question

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

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

＆＃13;

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

＆＃13;

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

您也可以使用transition property和:hover选择器使用纯css实现此目的。诀窍是，您需要使用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/

Answer 3

通过使用foolowing方式，你可以做fadeOut。

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

您还可以使用毫秒的时间代替“慢”＆＃39;没有＆＃39;。

延迟fadeOut菜单jquery

3 个答案:

修改