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

发布于 2024-09-19 01:31:15 字数 405 浏览 16 评论 0原文

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

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

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

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

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

谢谢大家。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野の 2024-09-26 01:31:16

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

You could build in a slight delay, say 200ms for the animation to complete so it's not jumpy, but leave .stop() so it still won't build up, like this:

$(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, this approach uses $.data() to store the timeout per element so each menu's handled independently, if you have many menu items this should give a nice effect.

回复收藏 0 原文

殊姿 2024-09-26 01:31:16

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

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

This one adds a slight delay on open - so running over it quickly won't pop out the menu.

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

回复收藏 0 原文

~没有更多了~