使用幻灯片和幻灯片的悬停的JQuery下拉菜单是跳跃的

前端之家收集整理的这篇文章主要介绍了使用幻灯片和幻灯片的悬停的JQuery下拉菜单是跳跃的前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经做了一个非常简单的下拉菜单,使用jQuery slideup和sliedown的功能 – 但它变得非常跳跃(我使用Firefox 3.6.8),如果鼠标移动到快速,或者如果鼠标被保持其中一个子菜单项.

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

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

没有.stop(true,true)的功能更糟.我也尝试添加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() {
      $('ul',true).slideUp(200);
    },this),200));
  });
});

You can give it a try here,这种方法使用$.data()来存储每个元素的超时,所以每个菜单独立处理,如果你有很多菜单项,这应该给一个很好的效果.

猜你在找的jQuery相关文章