Is there a way to cancel the jQuery hover event when it occurs?

Question

I use the jQuery hover event to make the element “glow” (change the opacity from 0.7 to 1) and then “smoothen” when the mouse leaves. This is great, unless you accidentally hover over an item multiple times. Then the element starts to blink (“glows” and “does not go out”) as many times as the mouse passed through it.

Not only is this ugly, but also means that any other jQuery.animate () event that needs to be fired must wait until these subsequent flashes are complete. An example can be found here: http://www.rootsoftllc.com/accounts/

Is there a way to tell the joverquery hover event that it can only fire once, and then it must wait until it is complete before it can, except for any mouse events?

Answer 1

Yes, it is actually quite simple. Before starting an animation with .animate() put .stop() there to stop any other animations in the queue.

Read here:

Online jquery documentation at .stop()

Answer 2

You can use .stop(true, true) to stop and clear the animation queue, for example:

 $('.window').hover(function() { $(this).stop(true, true).animate({opacity: 1}, 500); }, function() { $(this).stop(true, true).animate({opacity: 0.7}, 500); }); 

Answer 3

In jQuery, you can provide each animation with its own queue. I suggest that you give the hang effect of your own queue so that it does not interfere with other animations. You can then check how long the mouse has been inside the element. If it was not long enough to complete the animation, use . Stop () to stop the animation prematurely and make a quick animation back to where it should be.