.mouseover 正在激活，而 .mouseleave 功能仍在播放答案

【问题标题】：.mouseover is activating while the .mouseleave function is still playing.mouseover 正在激活，而 .mouseleave 功能仍在播放
【发布时间】：2020-03-31 18:49:18
【问题描述】：

我是编码新手，刚开始学习，所以请多多包涵。

当我将鼠标悬停在面板标题上时，我正在尝试使用 jQuery 使面板（卡片）的主体向下滑动，而当我不再将鼠标悬停在面板标题或主体上时，则使用滑动向上。每个动作、slideDown 和 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。我只希望 .mouseover 在 .slideDown 动作不再播放时被识别。有什么想法吗？

【问题讨论】：

为什么不让它成为点击事件而不是悬停？使用mouseenter 和mouseleave 可能也会有更好的运气。您还可以从中获得一些额外的想法：codepen.io/rpotterjr/pen/dLIga
我想我也可以尝试使用 click，感谢您的想法和链接。
只要确保无论您做什么，都要牢记最终用户。你永远不知道谁在使用你的应用程序。 Accessibility 可能是您应该考虑的最重要因素之一。

标签： jquery css

【解决方案1】：

我认为你可以使用 jQuery .stop() 函数来实现你想要的。如果这是必需的行为，请检查 sn-p，我将添加其他信息。

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

【讨论】：