如何停止重复 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()方法停止当前动画。

  $(".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

如何停止重复 jQuery 函数 mouseenter() 和 mouseleave()？

How to stop the repeat of the jQuery functions mouseenter() and mouseleave()?

javascript

jquery

mouseevent

mouseenter

mouseleave