在悬停时使用幻灯片和滑动的JQuery下拉菜单是跳跃式的

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.

我已经使用jQuery slideup和slidedown为这些函数创建了一个非常简单的下拉菜单 - 但是如果将鼠标快速移动到它上面,或者如果鼠标保持在上面,它会非常跳跃(我正在使用Firefox 3.6.8)其中一个子菜单项。

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.

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

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

有什么我想念的吗?我听说过clearqueue可能有效,或者可能超时,但无法弄清楚在哪里添加它们。

Thanks all.

2 个解决方案

#1

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:

你可以建立一个稍微的延迟,比如200ms的动画完成所以它不会跳跃,但是留下.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, 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.

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

#2

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

#1