如何防止在 jQuery 动画切换上重复动画？

Question

我有一个Pen here。

我有一个分享按钮，当您悬停时会展开，一切正常 - 除非您将鼠标悬停多次，否则它会在您悬停时不断重复动画。

有什么办法可以防止动画两次触发并跳跃？这是我的原始代码。

$('.share-icon').hover(function () {
  $(".share-open").animate({
    opacity: "toggle",
    width: "toggle"
  }, 200, function () {});
});

我试图通过仅在元素设置为不显示时触发动画来防止它，并且它的效果会更好一些，但是如果你玩它会很跳跃，所以我知道必须有更好的方法。 Attempt pen.

$('.share-icon').hover(function () {
  if ($('.share-open').css('display') == 'none') {
    $(".share-open").animate({
      opacity: "toggle",
      width: 170
    }, 200, function () {});
  } else {
    $(".share-open").animate({
      opacity: "toggle",
      width: 0
    }, 200, function () {});
  }
});

这里是 HTML。

<div class="share-outer">
  <div class="share-event">
    Share with your friends
    <div class="share-icon">
      <img src="arrow-hover.png">
      <div class="share-open">
        <img src="arrow.png">
        <i class="fa fa-facebook-official"></i>
        <i class="fa fa-twitter"></i>
        <i class="fa fa-envelope-o"></i>
      </div>
    </div>
  </div>
</div>

相关CSS：

.share-open { 
    display: none;
    opacity: 1;
}

谢谢！

Answer 1

你必须使用 stop() $(".share-open").stop().animate({