Stop jQuery animation

Question

I have a Options window, which is located in the upper right corner of the web page. Its opacity is set to 10%, so as not to be an obstacle for users. When they hang over (mouseenter), I use jQuery to fade it out and cut out the contents (and vice versa on the mouse output).

If they do it repeatedly, although the animation develops, and sometimes it can be left in a situation where your mouse stands still, but the box is yo-yoing around.

How can I get around this situation?

Here's how I'm setting up the animation now

$("#dropdown").mouseenter(function() { 
    $(this).fadeTo('fast',1);
    $("#options").slideDown();
});

$("#dropdown").mouseleave(function() { 
    $(this).fadeTo('fast',0.1);
    $("#options").slideUp();
});

Note. I use only jQuery and not any other plugins.

Answer 1

stop, , . , hover mouseenter/mouseleave.

$("#dropdown").hover(function() {  
    $(this).stop().fadeTo('fast',1); 
    $("#options").stop().slideDown(); 
}, function() {  
    $(this).stop().fadeTo('fast',0.1); 
    $("#options").stop().slideUp(); 
});

Answer 2

stop, .

$("#dropdown").mouseenter(function() { 
    $(this).stop(true).fadeTo('fast',1);
    $("#options").stop(true).slideDown();
});

$("#dropdown").mouseleave(function() { 
    $(this).stop(true).fadeTo('fast',0.1);
    $("#options").stop(true).slideUp();
});

hoverintent

Answer 3

stop fadein(), , :

$("#button").hover(function () {
    $("#light").stop().fadeIn();
  },
  function () {
    $("#light").stop().fadeOut();
});

, stop() , , ​​ , .

.

Answer 4

stop.

Stop current animation on matched elements.