Hover Out Fires Before Hover In Animation is Finished

[InTheOne 7 Likes (Newbie)]

I was trying to create a simple button hover effect using the jQuery(this) on the button. When you swipe your mouse over the button real fast the hover out animation triggers and does not allow the hover in animation to finish. This causes the button to get smaller and smaller and causes the text to stack up. I've seen solutions for this problem but none of them allow me to use jQuery(this) in the timeline. Any help would be much appreciated. ?

See the Pen rNaLwdQ by jonroc (@jonroc) on CodePen

[GreenSock 18,591 Likes (Superhero)]

From what I can tell, there's no reason to use jQuery(this) - you can simply use this (jQuery is just wasteful in that context). 

 

As for the tween, you're using a relative value, so the behavior you described is exactly what you're telling GSAP to do. Is there a particular reason you feel the need to use a relative value rather than an absolute one? Here's what I'd probably do (well, I'd use GSAP 3, but I see you're using GSAP 2 so I'll stick with that):

$('.b_button').each(function() {
  var $button = $(this),
      $fa = $('.fa-chevron-right', this),
      width = $button.width() + 1;
  $button.hover(function() {
      TweenMax.to($fa, .5, {right: '20px', autoAlpha: 1});
      TweenMax.to($button, .5, {width: width + 10, delay:.25});
  }, function() {
      TweenMax.to($fa, .5, {right: '40px', autoAlpha: 0});
      TweenMax.to($button, .5, {width: width, delay:.25});
  });
});

See the Pen 6fda616443d787b35c044e66e3e59283?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help?

[InTheOne 7 Likes (Newbie)]

Yes, thank you. I didn't even think of using .each( ) ?, sometime I get stuck on one thing and get blinded. This is exactly what I was going for. Thanks!

[GreenSock 18,591 Likes (Superhero)]

19 minutes ago, InTheOne said:

sometime I get stuck on one thing and get blinded.

Been there, done that...many times. Sometimes we all need an outsider's view to catch things. 

 

Happy tweening! And thanks for being a Club GreenSock member!