Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stop jQuery animations stacking

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.

like image 390
Chris Avatar asked Dec 04 '22 12:12

Chris


1 Answers

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(); 
});
like image 164
tvanfosson Avatar answered Dec 18 '22 06:12

tvanfosson