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

问题描述

我已经做了一个非常简单的下拉菜单，使用jQuery slideup和sliedown的功能 - 但它变得非常跳跃（我使用Firefox 3.6.8），如果鼠标移动到快速，或者如果鼠标在其中一个子菜单项上。

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

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

没有。停止（真实，真实）功能更糟糕。我也尝试添加hover-intent，但是因为我在同一个div中有一个悬停触发的幻灯片，它与幻灯片的功能冲突。

有没有什么我错过的？我听到clearqueue可能会工作，或者可能暂停，但是无法确定哪里可以添加。

感谢所有。

解决方案

你可以稍微延迟一点，说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（）{
 $ '，this）.stop（true，true）.slideUp（200）; 
}，this），200））; 
}）; 
}）; 
  

您可以尝试这里，这种方法使用 $。data（） 存储每个元素的超时 ，以便每个菜单独立处理，如果您有很多菜单项，这应该会产生不错的效果。

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/

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.

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

Thanks all.

解决方案

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.

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