Question

我正在开发一个带子菜单的导航栏。在页面加载时，条形加载，子框架被隐藏。当您将鼠标悬停在链接上时，子菜单会生成动画。我在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"
        });

});

任何帮助都会很棒！

Answer 1

您可以做的一件事就是按原样收紧现有代码：<li>下方和下拉列表<ul>上方有一个空格。如果你将它设置为"top" : "42px"，它会创建一个没有附加悬停事件的间隙，因此当它试图隐藏/同时显示时，它会使下拉“摇动”。

不要设置top属性，只需在每个实例中将其更改为padding-top即可。它使它更顺畅，更“可爱”。

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

Answer 2

我会将填充应用于#menu-nav LI而不是#menu-nav这会增加悬停响应区域。
我会将z-index: -1添加到.sub-menu类，因此它不会显示在菜单栏的顶部。
我会将.sub-menu li更改为.sub-menu a并添加display: block - 这会使整个子菜单按钮可以点击而不仅仅是链接。
< / LI>
根据Yury的建议，hoverIntent是控制鼠标灵敏度和用户错误的不错选择。

只是一些想法。

Answer 3

尝试使用hoverintent插件而不是hover。 http://cherne.net/brian/resources/jquery.hoverIntent.html

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

3 个答案: