Question

问题：当我将鼠标悬停在div块上时，ul列表项显示为fadein，当我将鼠标从div块中分散注意力时，ul列表项会淡出，当我执行相同操作时快速动作5,6,7次或更多次，当我对鼠标不做任何操作时，由于淡入持续时间，函数mouseenter（）和mouseleave（）会重复。我希望这例如，如果函数mouseenter（）已经启动，另一个函数mouseleave（）即使用户让鼠标从div块分心也不会启动，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

您可以使用$(".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);         
   });

或

{{1}}

Fiddle

如何停止重复jQuery函数mouseenter（）和mouseleave（）？

1 个答案: