当垃圾邮件与悬停事件时,元素可见性的问题

本文关键字:元素 可见性 问题 事件 悬停 | 更新日期: 2023-09-27 18:12:24

当我悬停在#HoverMe上时,#hidden显示,如果我取消悬停,#hidden将按预期消失。然而,如果我"垃圾邮件"的悬停-悬停-悬停-悬停-悬停-悬停真的很快,它会被bug,所以下次我悬停#HoverMe, #hidden,然后立即消失。我觉得是某种定时循环把它搞砸了?我该如何预防呢?

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

当垃圾邮件与悬停事件时,元素可见性的问题

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