javascript - 如何停止jquery重复

Question

当鼠标输入按钮时，我使用 jQuery 向下滑动列表

 $(".topics .goals").mouseenter(function(){
    $(".ligoals").slideDown("slow");
 });

当鼠标离开时向上滑动

$(document).ready(function(){
  $(".topics .goals").mouseleave(function(){
    $(".ligoals").slideUp("slow");
  });
});

但是我有问题，当我将鼠标快速移入和移出按钮时，jquery 会不断向下和向上滑动。我想知道是否有人可以提供帮助。

Answer 1

这是因为 mouseenter 和 mouseleave 事件被推送到队列中。如果移动速度非常快，则会有大量动画排队，并按时间顺序播放。

您可以使用.stop() 以避免这种行为。例如下面:

$(document).ready(function(){
  $(".topics .goals").mouseleave(function(){
    $(".ligoals").stop(true).slideUp("slow");
  });
  $(".topics .goals").mouseenter(function(){
    $(".ligoals").stop(true).slideDown("slow");
  });
});

一般示例:

$el.event( function(){                
   $(this).stop(true).animate(...);                
});