悬停时的 Jquery 动画子菜单不平滑
我正在开发一个带有子菜单的导航栏。页面加载时，栏会加载，并且子菜单会隐藏。当您将鼠标悬停在链接上时，子菜单会以动画形式出现。我在此处的 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"
});
});
任何帮助都会很棒！
I am developing a navigation bar with submenus. On page load, the bars load, and submenus are hidden. When you hover over a link, the submenu animates in. I prepared all of my code in a jsfiddel here: http://jsfiddle.net/6cAaN/
As you can see, it is working fairly well; however not perfectly. It is a bit buggy. Any ideas how I can sharpen up the following jquery to make the hover effect a bit smoother and better functioning?
Here is the 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"
});
});
Any help would be great!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以做一件事来按原样收紧现有代码：
下方和下拉列表上方有一个空格。如果您将其设置为"top" : "42px"，它会创建一个没有附加悬停事件的间隙，因此它会在尝试隐藏/显示时使下拉列表“摇晃”同时地。无需设置
top属性，只需在每个实例中将其更改为padding-top即可。它使它更加平滑和更“可悬停”。http://jsfiddle.net/Madmartigan/6cAaN/8/
One thing you can do to tighten the existing code as-is: There is a space beneath the
<li>and above the dropdown<ul>. Where you have it set to"top" : "42px", it's creating a gap that doesn't have the hover event attached, so it makes the dropdown "shake" as it tries to hide/appear simultaneously.Instead of setting the
topproperty, just change it topadding-topin each instance. It makes it a lot smoother and more "hoverable".http://jsfiddle.net/Madmartigan/6cAaN/8/
我会将填充应用于
#menu-nav LI而不是#menu-nav这将增加悬停响应区域。我会将
z-index: -1添加到.sub-menu类中，这样它就不会出现在菜单栏的顶部。我会将
.sub-menu li更改为.sub-menu a并添加display: block- 这将使整个子菜单菜单按钮可点击，而不仅仅是链接。正如 Yury 所建议的， hoverIntent 是控制鼠标灵敏度和用户错误的不错选择。
只是一些想法。
I would apply the padding to
#menu-nav LIinstead of#menu-navThis will increase the hover response area.I would add
z-index: -1to the.sub-menuclass so it doesn't appear on top of the menu bar.I would change
.sub-menu lito.sub-menu aand adddisplay: block- this will make the whole sub menu button click-able instead of just the link.As suggested by Yury, hoverIntent is a nice option for controlling mouse sensitivity and user error.
Just a few ideas.
尝试使用
hoverintent插件而不是hover。 http://cherne.net/brian/resources/jquery.hoverIntent.htmlTry to use
hoverintentplugin instead ofhover. http://cherne.net/brian/resources/jquery.hoverIntent.html