在hover时使用幻灯片和滑动的JQuery下拉菜单是跳跃式的

我已经使用jQuery slideup和slidedown为这些函数创建了一个非常简单的下拉菜单 – 但是如果将鼠标快速移动到它上面，或者如果鼠标保持在上面，它会非常跳跃（我正在使用Firefox 3.6.8）其中一个子菜单项。

我在以下链接中做了一个工作示例：

http://jsfiddle.net/jUraw/19/

如果没有.stop（true，true）函数，情况会更糟。 我也试过添加hover-intent，但因为我在同一个div中有一个hover触发的幻灯片，它与幻灯片的function相冲突。

有什么我想念的吗？ 我听说过clearqueue可能有效，或者可能超时，但无法弄清楚在哪里添加它们。

谢谢大家。

Answer 1

你可以建立一个稍微的延迟，比如200ms的动画完成所以它不会跳跃，但是留下.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)); }); }); 

你可以在这里尝试一下 ，这种方法使用$.data()来存储每个元素的超时，这样每个菜单都可以独立处理，如果你有很多菜单项，这应该会产生很好的效果。

Answer 2

这个会在打开时稍微延迟 – 因此快速运行它不会弹出菜单。

 $(function () { $('#nav li').hover(function () { $('ul', this).stop(true, true).delay(200).slideDown(200); }, function () { $('ul', this).stop(true, true).slideUp(200); }); });