Question

I created an h1 element that gets a class added to it and removed from it with a duration of 300ms when the mouse hovers over and off of it’s containing DIV #logo using jQuery‘s .hover() method in concert with jQuery UI‘s .addClass() and .removeClass() methods.

It works splendidly but only when the user hovers over #logo and stops to wait for .addClass() method to complete adding the new class to the h1 which takes 300 milliseconds total. If however the user moves off of the #logo DIV before the .addClass() method’s 300 milliseconds are up, the jQuery .addClass() or .removeClass() method(s) get(s) paralyzed. Trying to move the cursor back into the #logo does not affect the h1 anymore. It is locked into place for good until a browser refresh. Unacceptable.

You can view and try out my example at JS Bin over here *.

Try hovering over the #logo DIV box in the center of the screen slowly, you know, wait for the animation to complete. Then move the cursor off of it. All is well. Now try to just move the cursor quickly over the #logo DIV and you will see it lock up.

What code changes do I have to make in order to get this jQuery lock up from occurring?

EDIT: @pointy pointed me in the right direction. I got it to stop locking up by applying .stop(true,true) before the .addClass('hover',300) as well as applying it before the .removeClass('hover',300)

Answer 1

Stick a “stop” call in before the “removeClass”:

$('h1').stop(true, true).removeClass('hover', 300);

That jQuery UI class animation stuff is tricky.