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

Question

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

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

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

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

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

谢谢大家.

Answer 1

你可以建立一个稍微的延迟,比如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));
  });
});

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