Stop jQuery animations stacking

Question

I have an Options box that hovers in the top right of the webpage. It's opacity is set to 10% so as not to be obstructive to users. When they hover over (mouseenter) it I use jQuery to fade it in and slidedown the content (and the reverse on mouseout).

If they do this repeatedly though the animation stacks up and you can sometimes be left in a situation where your mouse is stood still but the box is yo-yoing around.

How can I get around this situation?

Here is how I currently setup the animations

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

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

Note I am using jQuery only and not any other plugins.

Answer 1

Call stop to terminate any existing animations before starting a new one. You should also probably use hover instead of 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

You can use the stop method which will stop animation and clear the animation queue.

$("#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();
});

You might also look in to the hoverintent plugin

Answer 3

You can use the stop method there i think.

Stop the currently-running animation on the matched elements.