How to prevent repeating animation on jQuery animate toggle?
<p>I have a <a href="http://codepen.io/taniarascia/pen/EPeyzj" rel="nofollow">Pen here</a>.</p>

<p>I have a share button that expands when you hover, and everything works fine - except if you hover over it multiple times, it will keep repeating the animation as many times as you've hovered. </p>

<p>Is there any way to prevent the animation from firing twice and jumping? Here is my original code.</p>

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

<p>I tried to prevent it by only firing the animation if the element is set to display none, and it works a little better, but if you play around with it it's jumpy, so I know there must be a better way. <a href="http://codepen.io/taniarascia/pen/JGaEWP" rel="nofollow">Attempt pen</a>.</p>

<pre><code>$('.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 () {});
  }
});
</code></pre>

<p>And here is the HTML.</p>

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

<p>Relevant CSS:</p>

<pre><code>.share-open { 
    display: none;
    opacity: 1;
}
</code></pre>

<p>Thanks!</p>