jQuery .slideUp（）效果運行問題

Question

任何人都可以告訴我爲什麼Effect常常處於運行狀態。我的意思是你懸停3次，不必等待效果完成，並且可以等到效果運行3次。

$(function() { 
      $('#dropdown_nav li').find('.sub_nav').hide(); 
      $('#dropdown_nav li').hover(function() { 

       $(this).find('.sub_nav').slideDown(300); 
      }, function() { 

       $(this).find('.sub_nav').delay(2000).slideUp(300); 
      }); 
     }); 

這裏可以測試它：http://jsfiddle.net/QTGvJ/

Answer 1

使用.stop()將清除動畫隊列

LIVE DEMO

$('#dropdown_nav li').on('mouseenter mouseleave',function() { 
     $('.sub_nav', this).stop().slideToggle(); 
}); 

隨着延遲的鼠標離開：

$('#dropdown_nav li').on('mouseenter mouseleave',function(e) { 
    var delayTime = e.type=='mouseleave' ? 1000 : 0; 
    $('.sub_nav', this).stop().delay(delayTime).slideToggle(); 
}); 

LIVE DEMO 2 WITH DELAY

瞭解更多：http://api.jquery.com/stop/