Jump to content


Hover Out Fires Before Hover In Animation is Finished

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.