.mouseover 正在激活，而 .mouseleave 函数仍在播放

Question

我是编码新手，刚刚开始学习，所以请耐心等待。

我正在尝试使用 jQuery 使面板(卡(的主体在将鼠标悬停在面板标题上时向下滑动，当不再悬停在面板标题或正文上时使 slideUp。 每个动作，滑下和滑上需要 500 毫秒。 这是我所拥有的：

$(document).ready(function() {
$('#body1').hide();
$('#card1' || '#body1').hover(
function() {
$("#body1").slideDown(500);
},
function() {
$('#body1').slideUp(500);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3 col-6 cardPadding">
<div id="card1" class="js card border-primary">
<div class="card-header bg-primary text-white">
#card1
</div>
<div id="body1" class="js card-body">content
</div>
</div>
</div>

发生的情况是，如果我在 .slideDown 发生时将鼠标悬停在面板上和面板外，每次我将鼠标移到面板上时，它都会 .slideUp 和 .slideDown。我只希望在不再播放 .slideDown 操作时识别 .mouseover。有什么想法吗？

Answer 1

我认为你可以使用jQuery.stop()函数来实现你想要的。检查代码段是否是必需的行为，我将添加其他信息。

$(document).ready(function() {
$('#body1').hide();
$('#card1' || '#body1').hover(
function() {
$("#body1").stop().slideDown(500);
},
function() {
$('#body1').stop().slideUp(500);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3 col-6 cardPadding">
<div id="card1" class="js card border-primary">
<div class="card-header bg-primary text-white">
#card1
</div>
<div id="body1" style="background-color:red;" class="js card-body">content
</div>
</div>
</div>