jQuery - How to Prevent Animation Queue Buildup with Double Animations?

Question

Hello,

I was taking a look at this tutorial here to prevent animation buildups:

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

My situation: I am doing a double animation like this below, and would like the prevent the animation build up. Since I have 2 animations going, it seems it ignores the .stop(). What can be done to prevent this? I have tried .stop() on both .animate and if I do that it stops animating...

$(document).ready(function() {
$('#element').hover(function() {
    $(this).stop()
        .animate(
            { left: 200 }, {
                duration: 'slow',
            })
        .animate(
            { top: 200 }, {
                duration: 'slow',
            });
} , function() {
    $(this).stop()
        .animate(
            { left: 0 }, {
                duration: 'slow',
            })
        .animate(
            { top: 0 }, {
                duration: 'slow',
            });
});

});

Any help will be greatly aprecaited!!

Answer 1

Use:

$(this).stop(true);

From stop():

Stops all the currently running animations on all the specified elements.

Note: "currently running" not queued, as you're experiencing. For that supply the parameter:

clearQueue (Optional) Boolean

A Boolean (true/false) that when set to true clears the animation queue, effectively stopping all queued animations.

Also you can supply the second parameter that will shortcut to animation completion rather than cancelling it if that helps.