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

Question

当我将鼠标悬停在#HoverMe上时#hidden显示，如果我将其悬停，#hidden将按预期消失。但是，如果我＆＃34;垃圾邮件＆＃34; hover-unhover-hover-unhover非常快，它会被捕获，所以下次我悬停#HoverMe，#hidden然后立即消失。我认为有某种定时器循环搞砸了吗？我该如何预防？

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

Answer 1

在开始下一个动画之前，使用stop(true)删除任何排队的动画：

＆＃13;

＆＃13;

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

＆＃13;

#hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;