如何停止重複的jQuery函數mouseenter（）和mouseleave（）？

Question

問題：當我將鼠標懸停在div塊上時，ul列表項目顯示爲淡入淡出，當我從div塊中分離鼠標時，ul列表項目淡出，並且當我執行相同操作時快5,6,7或更多次，當我對鼠標不做任何事情時，函數mouseenter（）和mouseleave（）正在重複，因爲淡出的持續時間。例如，如果函數mouseenter（）已經啓動，那麼即使用戶將鼠標從div塊分散開來，另一個函數mouseleave（）也不會啓動，但mouseleave（）函數必須等到mouseenter（）函數有效完成他的工作，然後可以啓動mouseleave（）函數，等等。怎麼辦？

演示：https://jsfiddle.net/qcvL1xjg/

HTML：

<div class="block"></div> 
<ul class="responser"> 
    <li>Home</li> 
    <li>Product</li> 
    <li>About</li> 
</ul> 

CSS：

.block { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 

的jQuery：

$(document).ready(function() { 
    $('.responser').hide(); 

    $(".block").mouseenter(function() {  
      $('.responser').fadeIn(1250);   
    }); 

    $('.block').mouseleave(function() {  
      $('.responser').fadeOut(1250);   
    }); 
}); 

Answer 1

可以使用，爲他人服務.stop()方法pping當前動畫。

$(".block").hover(
    function() { 
     $('.responser').stop().fadeIn(1250); 
    }, function() { 
     $('.responser').stop().fadeOut(1250); 
    }); 

或

$(".block").mouseenter(function() {  
      $('.responser').stop().fadeIn(1250);   
    }); 

    $('.block').mouseleave(function() {  
      $('.responser').stop().fadeOut(1250);   
    }); 

Fiddle