Question

我正在寻找一种方法来淡化列表排序导航中的子菜单，因为我希望它消失：

总有一个活动菜单项 - 如果活动菜单项位于子菜单中 - 也是一个活动菜单父项。因此，在init时，应该可以看到具有活动当前项或当前父项的子菜单。如果我悬停其他菜单项，其子菜单将淡入，活动的子菜单淡出。离开整个菜单后，活动子菜单再次淡入。另外，我使用jQuery插件hoverIntent（http://cherne.net/brian/resources/jquery.hoverIntent.html）为每个悬停操作提供超时。这是我到目前为止所得到的，但它确实是错误的。由于某些原因，子菜单有时只是完全消失，当悬停两个项目而不离开导航时，两个子菜单重叠。有没有人对我有想法或提示？ =）请在此处查看演示：http://jsfiddle.net/BQuPz/

Answer 1

CSS问题：最好不要自己使用display:none和opacity，将其留给jQuery并使用fadeIn()和fadeOut()的正确函数display:block; float:left;。

您应该使用<li>，而不是将display:inline-block放在菜单的<li>元素上。如果你浮动mouseleave，它会有效地将它们从父容器中撕掉，使ul的大小为零，因此除非你明确设置它的大小，否则不可能听到timeout个事件。

代码问题：在hoverIntent插件中，out可能不是您要查找的内容。超时会在一段时间后自动触发sensitivity事件。要延迟悬停效果，请改用interval和over。查看documentation page。

如果您应用上述修复，则所需的唯一事件是hoverIntent's over和主导航的mouseleave。 mouseleave事件在当前子菜单中淡出并淡出其余部分，当用户悬停在导航中时，// Hide inactive ones $('#main-nav > li:not(.current-menu-parent) .sub-menu').hide(); // What to do when hovering over a menu item $("#main-nav > li").hoverIntent({ over: function(){ // Find the hovered menu's sub-menu var $submenu = $(this).find('.sub-menu'); // Stop the animation and fade out the other submenus $('.sub-menu').not($submenu).stop(true,true).fadeOut(260); // Fade in the current one $submenu.fadeIn(260); } }); // What to do when user leaves the navigation area $('#main-nav').mouseleave(function(){ // Fade out all inactive submenus $('#main-nav > li:not(.current-menu-parent) .sub-menu').fadeOut(260); // Fade in the active one $('.current-menu-parent .sub-menu').fadeIn(260); });在活动子菜单中淡出。看看你修改过的jsfiddle演示：http://jsfiddle.net/BQuPz/4/

{{1}}

Answer 2

而不是在$(this).find("ul").animate({'opacity': '1'}, 250);中使用动画我会使用带有回调的fadeIn和fadeOut函数。然后你确定你的fadeIn动画在淡出结束后开始

element.fadeOut(250,function(){otherElement.fadeIn(250)})

jQuery菜单效果出错了

2 个答案: