14

我使用 jQuery slideup 和 slidedown 功能制作了一个非常简单的下拉菜单 - 但是如果鼠标快速移动到它上面，或者如果鼠标被按住，它会变得非常跳跃（我使用的是 Firefox 3.6.8）子菜单项之一。

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

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

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

有什么我想念的吗？我听说 clearqueue 可能会起作用，或者可能会超时，但不知道在哪里添加它们。

谢谢大家。

4

2 回答 2

24

你可以稍微延迟一下，比如 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));
  });
});

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

于 2010-09-14T23:06:11.067 回答
2

这个在打开时增加了一点延迟 - 所以快速运行它不会弹出菜单。

$(function () {    
  $('#nav li').hover(function () {
    $('ul', this).stop(true, true).delay(200).slideDown(200);
  }, function () {
    $('ul', this).stop(true, true).slideUp(200);
  });
});
于 2010-09-15T00:15:47.420 回答