悬停时的Jquery动画子菜单不流畅

Posted 2023-03-06

技术标签:

【中文标题】悬停时的Jquery动画子菜单不流畅【英文标题】：Jquery animate submenu on hover isn't smooth 【发布时间】：2011-08-10 18:23:53 【问题描述】：

我正在开发一个带有子菜单的导航栏。在页面加载时，加载条，并且隐藏子菜单。当您将鼠标悬停在一个链接上时，子菜单会显示动画。我在 jsfiddel 中准备了所有代码：http://jsfiddle.net/6cAaN/

如您所见，它运行良好；但并不完美。这有点马车。有什么想法可以提高以下 jquery 以使悬停效果更平滑和更好地运行吗？

这里是 jquery：

$("#menu-nav ul:first").css("opacity":"0");

    $("#menu-nav li").hover(function()
         $(this).find('ul:first').stop().show().animate(
            "top" : "42px",
            "opacity" : "1"
         , 300); 

    ,function() 
        $(this).find('ul:first').stop().animate(
            "top" : "0",
            "opacity" : "0"
        );

);

任何帮助都会很棒！

【问题讨论】：

在 Opera 11.10 和 IE9 中对我来说似乎相当不错。您在哪个浏览器中遇到问题？火狐4！当您将鼠标悬停并将鼠标从父级切换到子级之间时，问题就出现了。它有点闪烁 【参考方案1】：

您可以按原样收紧现有代码：<li> 下方和下拉列表<ul> 上方有一个空格。在您将其设置为"top" : "42px" 的地方，它会创建一个没有附加悬停事件的间隙，因此它会在尝试同时隐藏/出现时使下拉菜单“摇晃”。

无需设置top 属性，只需在每个实例中将其更改为padding-top。它使它更平滑，更“可悬停”。

http://jsfiddle.net/Madmartigan/6cAaN/8/

【讨论】：

【参考方案2】：

我会将填充应用于#menu-nav LI 而不是#menu-nav 这将增加悬停响应区域。

我会将z-index: -1 添加到.sub-menu 类中，这样它就不会出现在菜单栏的顶部。

我会将.sub-menu li 更改为.sub-menu a 并添加display: block - 这将使整个子菜单按钮可以点击，而不仅仅是链接。

正如 Yury 所建议的，hoverIntent 是控制鼠标灵敏度和用户错误的不错选择。