jQuery幻灯片菜单快速鼠标悬停时的抖动行为

Question

所以我设法为菜单创建了一个setTimout slideUp/Down功能，该功能非常棒 - 但在某些情况下，当用户将鼠标悬停在链接上并通过其子链接快速滑动下来 - 我知道这个问题很典型，但我尝试过不同的事情失败。

这里的工作演示 - 你可以看到，如果你的鼠标在链接的功能发生螺母 http://jsfiddle.net/eA2HL/2/

jQuery('.nav.mainmenu > li').each(function() { 
    var t = null; 
    var $this = jQuery(this); 
    var result = jQuery('#result'); 
    $this.hover(function() { 
     t = setTimeout(function() { 
      if($this.find('ul').length > 0) { 
       result.slideDown(200, function() { 
        if($this.is(':visible')) { 
         $this.find('ul').show(); 
        } 
       }); 
      } 
      t = null; 
     }, 300); 
    }, function() { 
     if (t) { 
      clearTimeout(t); 
      t = null; 
     } else { 
      $this.find('ul').hide(0); 
      result.slideUp(333, function() { 
       $this.find('ul').hide(0); 
      }); 
     } 
    }); 
}); 

Answer 1

使用.stop(1,1)（同.stop(true , true)）将有助于清除一些动画集结：

jQuery('.nav.mainmenu > li').each(function() { 
     var t = null; 
     var $this = jQuery(this); 
     var result = jQuery('#result'); 
     $this.hover(function() { 
      t = setTimeout(function() { 
       if($this.find('ul').length > 0) { 
        result.stop(1,1).slideDown(200, function() { // HERE 
         if($this.is(':visible')) { 
          $this.find('ul').show(); 
         } 
        }); 
       } 
       t = null; 
      }, 300); 
     }, function() { 
      if (t) { 
       clearTimeout(t); 
       t = null; 
      } else { 
       $this.find('ul').hide(0); 
       result.slideUp(333, function() { 
        $this.find('ul').hide(0); 
       }); 
      } 
     }); 
    }); 

fiddle demo

Answer 2

您还可以检查是“结果”被动画像这样（如果动画不动画）：

if($(result).is(':animated')){ 
    return false; 
    }