Question

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

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

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

有什么我想念的吗？我听说过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));
  });
});

You can give it a try here，此方法使用$.data()来存储超时每个元素，因此每个菜单都是独立处理的，如果你有很多菜单项，这应该会产生很好的效果。< / p>

Answer 2

这个会在打开时稍微延迟 - 因此快速跳过它不会弹出菜单。

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

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

2 个答案: