CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Tania Rascia
Tania Rascia

Reputation: 1775

How to prevent repeating animation on jQuery animate toggle?

I have a Pen here.

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.

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

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

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. 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 () {});
  }
});

And here is the 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>

Relevant CSS:

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

Thanks!

Upvotes: 0

Views: 249

Answers (1)

Roland Krinner
Roland Krinner

Reputation: 421

You have to use stop() $(".share-open").stop().animate({

Upvotes: 2

Related Questions