悬停时使用上滑和下滑的 JQuery 下拉菜单很跳跃答案

【问题标题】：JQuery dropdown menu using slideup and slidedown on hover is jumpy悬停时使用上滑和下滑的 JQuery 下拉菜单很跳跃
【发布时间】：2010-09-15 08:15:47
【问题描述】：

我已经使用 jQuery slideup 和 slidedown 功能制作了一个非常简单的下拉菜单 - 但是如果鼠标快速移动到它上面，或者如果鼠标在子菜单项之一上举行。

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

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

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

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

谢谢大家。

【问题讨论】：

似乎在 Firefox 和 Chrome 中运行良好。

标签： jquery menu drop-down-menu slideup slidedown

【解决方案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() 来存储超时每个元素，因此每个菜单都是独立处理的，如果您有很多菜单项，这应该会产生很好的效果。

【讨论】：

@SimpleCoder - 如果你快速悬停，这种方法真的行不通 :) 此外，你还需要适用于这里任意数量的 <li> 元素的东西 :)
你是对的，谢谢:)。我已经修复了我的方法：jsfiddle.net/jUraw/23。由于悬停意图，快速悬停不应打开菜单
结果是——他们都为我工作！非常感谢 Nick Craver、SimpleCoder 和 sje97。我相信我将实施 SimpleCoder 的“23”解决方案，因为它似乎提供了一个更强大的框架。我目前正在阅读 JQuery for Dummies，因此我将研究您的每个解决方案，以了解您如何设法实现我无法实现的目标。我太兴奋了！感谢您的所有帮助！

【解决方案2】：

这个会在打开时稍微延迟 - 所以快速运行它不会弹出菜单。

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

【讨论】：

哇——感谢大家对此的努力。迫不及待地想明天全部尝试并向大家报告。（关于所有说它看起来不错的人 - 这确实是一个古怪的小错误，您必须在它上面来回移动几次，然后只需将鼠标放在其中一个 subnav 链接上 - 相信我，它完全被搞砸了！经常）。非常感谢，通过阅读您建议的代码，我学到了很多东西。