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