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

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/