javascript - 在开始下一个功能之前等待一个功能完成

Question

可能是一个非常简单的问题，但我是一个 JavaScript 新手:

如何在开始“mouseleave”动画之前等待“mouseenter”动画完成？

有时用户的鼠标移动非常快，但我希望动画完全播放，调用 mouseleave Action 。

$('.footer-links').on('mouseenter', function() {
  $(this).addClass('hover');
});

$('.footer-links').on('mouseleave', function() {
  $(this).removeClass('hover');
});

Answer 1

如果您使用 CSS transition 或 animation，请使用相应的 "transitionend" 或 "animationend" 事件:

要在悬停时保持悬停状态，请将 "transitionend" 回调移动到 "mouseleave" 事件中，并确保在 CSS 中同时使用 : hover 和 class .hover 在一起!

$('.footer-links').on({
  mouseenter() {
    $(this).addClass('hover');
  },
  mouseleave() {
    $(this).on("transitionend", function() {
      $(this).removeClass('hover');
    });
  }
});

.footer-links {
  transition: background 2s ease-out;
}

.footer-links:hover,
.footer-links.hover {
  background: red;
}

<div class="footer-links">TEST ONE</div>
<div class="footer-links">TEST TWO</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>