Often times I came around a site where developers used jQuery for displaying hover elements, like a tooltip or dropdown-menu elements, without using jQuery.stop() before the .animate() method. Therefore the user can accidentally trigger the .animate() method multiple times, causing a confusing effect like blinking. Here’s the guide to avoid this.

What does it do?

jQuery’s .stop() method stops the currently running animation on the matched elements. Additionally you can define certain options by passing values to the method.


jQuery stop method explained


Here the .hover() method to make the tooltip fade in and out. Try spamming it – it’ll keep blinking until the queue is empty.

//Here we're not using .stop()
    }, function(){

Now we’ve inserted the .stop() method just before the .animate() method. The result seems a lot cleaner.
Here’s the code:

//Here we are using the .stop() method
    }, function(){

Especially on dropdown menus it’s also very helpful. Even if you’re dealing with a click handler for example when building a slider the .stop() method comes in handy for it can prevent endless queueing.

More on this