Jump to content
Search Community

Hover Out Fires Before Hover In Animation is Finished

InTheOne test
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

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.
×
×
  • Create New...