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

Question

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

当我将鼠标悬停在面板标题上时，我正在尝试使用 jQuery 制作面板(卡片)的主体 slideDown，当我不再将鼠标悬停在面板标题或正文上时使用 slideUp。每个 Action ，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 Action 时被识别。有什么想法吗？

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>