jQuery菜单效果出错了

Question

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

总是有一个活动菜单项 - 如果活动菜单项位于子菜单中 - 也是一个活动菜单父项。因此，在初始化时，具有活动当前项目或当前父项目的子菜单应该是可见的。如果我将鼠标悬停在其他菜单项上，其子菜单将淡入，活动菜单将淡出。离开整个菜单后，活动子菜单再次淡入。另外，我使用 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; 在菜单的

元素上，您应该使用 display:inline-block。如果浮动

，则会有效地将它们从父容器中分离出来，使 ul 的大小为零，因此无法侦听 mouseleave 事件除非你明确设置它的大小。

代码问题：在hoverIntent插件中，超时可能不是您想要的。 Timeout 在一定时间后会自动触发 out 事件。要延迟悬停效果，请改用sensitivity 和interval。查看文档页面。

如果应用上述修复，唯一需要的事件是hoverIntent 的over 和主导航的mouseleave 。 over 事件淡入当前子菜单并淡出其余子菜单，当用户将鼠标悬停在导航上时，mouseleave 淡入活动子菜单。查看修改后的 jsfiddle 演示： http://jsfiddle.net/BQuPz/4/

// 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);
});

Answer 2

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

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