javascript - 使用悬停事件发送垃圾邮件时元素可见性问题

Question

当我将鼠标悬停在#HoverMe 上时，#hidden 显示，如果我取消悬停它，#hidden 将按预期消失。然而，如果我用hover-unhover-hover-unhover“垃圾邮件”非常快，它就会被窃听，所以下次我悬停#HoverMe时，#hidden就会立即消失。我认为有某种计时器循环搞砸了？我该如何防止这种情况发生？

$("#HoverMe").hover(function() {
    $("#hidden").show();
}, function() {
    $("#hidden").delay(1000).fadeOut();
});

Answer 1

在开始下一个动画之前，使用 stop(true) 删除所有排队的动画:

$("#HoverMe").hover(function() {
  $("#hidden").stop(true).show();
}, function() {
  $("#hidden").stop(true).delay(1000).fadeOut();
});

#hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="HoverMe">Hover me</div>
<div id="hidden">Not hidden!</div>