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