悬停时使用向上滑动和向下滑动的 JQuery 下拉菜单是跳跃式的

Question

我使用 jQuery Slideup 和 Slidedown 功能制作了一个非常简单的下拉菜单 - 但如果鼠标快速移动到其上，或者如果鼠标在其上快速移动，它会变得非常跳跃(我使用的是 Firefox 3.6.8)保存在子菜单项之一上。

我在以下链接中制作了一个工作示例:

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

如果没有 .stop(true, true) 函数，情况会更糟。我还尝试添加悬停意图，但因为我在同一 div 中有一个悬停触发的幻灯片，所以它与幻灯片的功能冲突。

我有什么遗漏的吗？我听说clearqueue可能有效，或者可能超时，但不知道在哪里添加它们。

谢谢大家。

Answer 1

您可以稍微延迟构建，例如 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 ，这种方法使用 $.data()存储每个元素的超时，以便独立处理每个菜单，如果您有很多菜单项，这应该会产生很好的效果。