Why do the CSS and jQuery classes get stuck when moving the cursor quickly over the target selector when using .hover () ,. addClass () & .removeClass ()?

Question

I created an element h1that adds a class to it and is removed from it with a duration of 300 ms when the mouse hovers over it, containing a DIV #logo, using jQuery in .hover() conjunction with jQuery UI .addClass() and .removeClass().

It works great, but only when the user hovers over #logoand stops waiting for the .addClass () method to complete adding a new class to h1, which takes 300 milliseconds. If, however, the user disconnects from the #logoDIV before the method .addClass()reaches 300 milliseconds, the jQuery methods .addClass()or .removeClass()will be paralyzed. Attempting to move the cursor back to #logono longer affects h1. It is locked in place until the browser is updated. Unacceptably.

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

Try to slowly hover over the #logoDIV field in the center of the screen, you know, wait for the animation to complete. Then move the cursor away from it. Things are good. Now try quickly moving the cursor over the #logoDIV and you will see that it is locked.

What code changes should I make to avoid jQuery blocking?

EDIT: @pointy pointed me in the right direction. I got it to stop the lock, applying .stop(true,true)before .addClass('hover',300)and also applying it before.removeClass('hover',300)

Answer 1

Insert a stop call before removeClass:

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

This jQuery UI class animation stuff is complicated.