如何防止在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({