Back in my Flash days, animations seemed to just work.  I am finding that jQuery hover and animate events are not as forgiving.

I have a web page with a grid of images.  Each image has a jQuery hover event.  The issue I was having with this is that when I would quickly hover from image-to-image or swipe the cursor across the screen, the hover effects, collectively, would look weird and sometimes would not fire properly at all.

The solution (thanks to Tom for providing it!), was to add the stop(true,true) event to each animation as follows:

// jQuery
$(this).stop(true, true).animate({opacity: 0}, 150);
}, function(){
$(this).stop(true, true).animate({opacity: .8}, 150);

Additional Source


We love to communicate: phone, email, text, Facebook, Twitter, LinkedIn, you name it.



Call Now

Enroll in Our Free Beginner WordPress Class - delivered to your Email Inbox!

Become a WordPress superstar for FREE in only minutes a day!  Our free Beginner WordPress Email Class will be delivered to your inbox!

Learn More 

You Have Successfully Enrolled! Prepare For Amazing!