悬停时使用上滑和下滑的 JQuery 下拉菜单是跳跃的 [英] JQuery dropdown menu using slideup and slidedown on hover is jumpy

问题描述

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

I've made a very simple dropdown menu using jQuery slideup and slidedown for the functions - but it gets very jumpy (I'm using Firefox 3.6.8) if the mouse is moved to quickly over it, or if the mouse is held on one of the submenu items.

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

I've made a working example at the following link:

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

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

Without the .stop(true, true) function it is even worse. I've also tried adding hover-intent, but because I have a hover-triggered slideshow in the same div it conflicts with the slideshow's functionality.

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

Is there something I'm missing? I have heard clearqueue might work, or maybe timeout, but can't figure out where to add them.

谢谢大家.

推荐答案

你可以稍微延迟，比如 200 毫秒让动画完成，这样它就不会跳动，但离开 .stop()所以它仍然不会建立，就像这样:

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));
  });
});

你可以在这里试试，这种方法使用了$.data() 用于存储每个元素的超时时间，所以每个菜单都是独立处理的，如果你有很多菜单项，这应该会产生很好的效果.

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.

这篇关于悬停时使用上滑和下滑的 JQuery 下拉菜单是跳跃的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！