After creating a customized h1 element, I implemented a feature where a class is added and removed from it with a smooth transition of 300ms when the mouse hovers over and off its parent DIV #logo. This was achieved using jQuery's .hover() method along with jQuery UI's .addClass() and .removeClass() methods.
The functionality works flawlessly as long as the user hovers over the #logo and allows for the .addClass() method to complete adding the new class within the 300 milliseconds timeframe. However, if the user moves away from the #logo before this time elapses, the jQuery .addClass() or .removeClass() method(s) become unresponsive. Even trying to re-hover over the #logo does not trigger the effect on the h1 anymore, effectively locking it in place until a browser refresh is performed. This issue is deemed unacceptable.
To view and test this behavior, check out my demonstration on JS Bin *.
Experiment by hovering slowly over the central #logo DIV box, allowing the animation to complete. Then move the cursor away smoothly - everything should be functioning correctly. Next, try swiftly moving the cursor across the #logo DIV, resulting in the undesired lock-up of the animation.
I am seeking advice on what code modifications are needed to prevent this jQuery lock up from happening.
EDIT: Thanks to @pointy's guidance, I managed to resolve the issue by including .stop(true,true) before both .addClass('hover',300) and .removeClass('hover',300) in my script.