jQuery Hover with Animate: Animations Not Stopping Correctly

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
$('.myclass').hover(function(){
$(this).stop(true, true).animate({opacity: 0}, 150);
}, function(){
$(this).stop(true, true).animate({opacity: .8}, 150);
});

Additional Source

Posted in

Toby Cryns

Toby Cryns is a freelance CTO, expert WordPress consultant, and teacher.

He offers free advice to improve your freelance biz.

He also publishes small droppings every now and then to twitter.com/tobycryns and twitter.com/themightymo

Follow Toby's contributions on Github and WP.org.