CODEWITHSUNDEEP
jqueryjquery-animate
Enrique Moreno Tent
Enrique Moreno Tent

Reputation: 25307

jQuery animate breaks with quick mouse movement!

heres a problem of jQuery that has been haunting me for a long time, and I want to finally find a solution. Havng this code:

http://jsfiddle.net/MDfgd/20/

If I move my mouse quickly through all the objects, the animation breaks, as it doesn't unfold completely. How could I do it so that this doesnt happen?

I tried "stop(true, true)", but this makes the animation lose its smoothness, since it jumps to the end of the animation Queue.

Thanks.

Upvotes: 0

Views: 1397

Answers (4)

reko_t
reko_t

Reputation: 56450

I think what he means is that if he moves the mouse over and out in a quick manner, he doesn't want the animations to stack up infinitely. However doing .stop() will result in the current animation being stopped instantly, instead of letting the current animation to run its course and removing the rest of the animations from the queue. Doing .stop(true, true) will jump to the end of the current animation and continue from there.

What the OP wants, I think, is to let the current animation to run through, and after that start the next animation, instead of stacking up the animations infinitely in case of fast mouse movement.

One way to achieve that is to keep track of the currently animating element yourself. This shows one way to achieve what you want:

http://jsfiddle.net/ZrdV6/

EDIT

Ok after clarification I made another example. This basically prevents the height from getting messed up by using stop() on an element that is being animated by slideDown() and slideUp().

The trick is to do the animation yourself with .animate(), and to keep track of the original height yourself.

http://jsfiddle.net/YmwZa/1/

Upvotes: 2

Anand Thangappan
Anand Thangappan

Reputation: 3106

$(document).ready(function(){

    $("ul.first li").mouseenter(function(){
        $("ul", this).slideDown();
    });
    $("ul.first li").mouseleave(function(){
        $("ul", this).slideUp();
    });

});

Upvotes: 1

kinakuta
kinakuta

Reputation: 9037

I'm a little confused about what you mean by "lose its smoothness" - it still looks smooth to me: http://jsfiddle.net/MDfgd/21/

Upvotes: 1

Tomgrohl
Tomgrohl

Reputation: 1767

I've used .stop( true, true ) and it seems to work OK.

The animation still looks smooth.

Demo: http://jsfiddle.net/tomgrohl/Pqz9s/

Upvotes: 1

Related Questions