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:inline-block，而不是将display:block; float:left;放在菜单的<li>元素上。如果浮动<li>s，这将有效地将它们从父容器中分离出来，留下零大小的ul，因此除非显式设置它的大小，否则不可能侦听mouseleave事件。

代码的问题：在hoverIntent插件中，timeout可能不是你想要的。Timeout在一段时间后自动激发out事件。要延迟悬停效果，请改用sensitivity和interval。查看documentation page。

如果你应用上面的修复，唯一需要的事件是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

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

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