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

Answer 1

The problem with using stop before a fadein(), such as in this example:

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

Is that the stop() will have the fade out stop at whatever opacity the element has faded to when the hover state is changed and will start at the same opacity when hovered over again.

The result is that multiple rapid hovers will eventually fade out the element and won't fade in again.

Answer 2

You can use the stop method there i think.

Stop the currently-running animation on the matched elements.

Answer 3

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 4

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