在悬停时使用上滑和下滑的 JQuery 下拉菜单是跳跃的
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3713513/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery dropdown menu using slideup and slidedown on hover is jumpy
提问by heathwaller
I've made a very simple dropdown menu using jQuery slideup and slidedown for the functions - but it gets very jumpy (I'm using Firefox 3.6.8) if the mouse is moved to quickly over it, or if the mouse is held on one of the submenu items.
我已经使用 jQuery slideup 和 slidedown 为功能制作了一个非常简单的下拉菜单 - 但如果鼠标快速移动到它上面，或者如果鼠标被按住，它会变得非常跳跃（我使用的是 Firefox 3.6.8）子菜单项之一。
I've made a working example at the following link:
我在以下链接中做了一个工作示例：
Without the .stop(true, true) function it is even worse. I've also tried adding hover-intent, but because I have a hover-triggered slideshow in the same div it conflicts with the slideshow's functionality.
如果没有 .stop(true, true) 函数，情况会更糟。我也尝试添加悬停意图，但是因为我在同一个 div 中有一个悬停触发的幻灯片，它与幻灯片的功能冲突。
Is there something I'm missing? I have heard clearqueue might work, or maybe timeout, but can't figure out where to add them.
有什么我想念的吗？我听说 clearqueue 可能有效，或者可能超时，但不知道在哪里添加它们。
Thanks all.
谢谢大家。
回答by Nick Craver
You could build in a slight delay, say 200ms for the animation to complete so it's not jumpy, but leave .stop()so it still won't build up, like this:
你可以稍微延迟构建，比如 200 毫秒让动画完成，这样它就不会跳动，但离开.stop()它仍然不会建立，像这样：
$(function () {
$('#nav li').hover(function () {
clearTimeout($.data(this, 'timer'));
$('ul', this).stop(true, true).slideDown(200);
}, function () {
$.data(this, 'timer', setTimeout($.proxy(function() {
$('ul', this).stop(true, true).slideUp(200);
}, this), 200));
});
});
You can give it a try here, this approach uses $.data()to store the timeout per elementso each menu's handled independently, if you have many menu items this should give a nice effect.
您可以在这里尝试一下，这种方法用于$.data()存储每个元素的超时，以便每个菜单独立处理，如果您有很多菜单项，这应该会产生很好的效果。
回答by sje397
This one adds a slight delay on open - so running over it quickly won't pop out the menu.
这个在打开时会增加一个轻微的延迟 - 所以快速运行它不会弹出菜单。
$(function () {
$('#nav li').hover(function () {
$('ul', this).stop(true, true).delay(200).slideDown(200);
}, function () {
$('ul', this).stop(true, true).slideUp(200);
});
});
