CODEWITHSUNDEEP
jqueryjquery-animate
Chris
Chris

Reputation: 27384

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.

Upvotes: 4

Views: 7899

Answers (4)

raisinlove
raisinlove

Reputation: 11

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.

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382686

You can use the stop method there i think.

Stop the currently-running animation on the matched elements.

Upvotes: 1

PetersenDidIt
PetersenDidIt

Reputation: 25620

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

Upvotes: 2

tvanfosson
tvanfosson

Reputation: 532435

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

Upvotes: 13

Related Questions