Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stopping specific jQuery animations

I have multiple animations on a single object, and I need to stop a specific animation rather than all of them. It doesn't look like the .stop() method can do this.

For instance, when animating opacity and width simultaneously, I may need to cancel the opacity animation while still completing the width animation. It would seem that this is not possible, but I am hoping that someone knows a trick or an API call that I'm missing.

Note: I'm not talking about queued animations, I'm looking to animate multiple attributes at the same time with the ability to stop some of those attribute animations after they have already started

like image 262
slifty Avatar asked Feb 09 '11 19:02

slifty


People also ask

How do you stop the currently running animation?

The jQuery stop() method is used to stop the jQuery animations or effects currently running on the selected elements before it completes. The basic syntax of the jQuery stop() method can be given with: $(selector). stop(stopAll, goToEnd);

Which function can we use to stop any running animation for the selected element?

stop() is called on an element, the currently-running animation (if any) is immediately stopped. If, for instance, an element is being hidden with . slideUp() when .

How do I stop a jQuery script?

The stop() method is an inbuilt method in jQuery which is used to stop the currently running animations for the selected element. Syntax: $(selector). stop(stopAll, goToEnd);

How do you stop an animation in JavaScript?

pause() The pause() method of the Web Animations API's Animation interface suspends playback of the animation.


1 Answers

I hate to be a guy who answers his own question (thanks so much for the detailed responses and putting brain power into it!) but I have found a direct answer. Apparently there is a parameter for the .animate() method called "queue" which defaults to true but you can set to false in order to have your animation take place immediately.

This means that by setting queue to false you can run multiple animations using separate calls without having to wait for the previous one to finish. Better yet, if you try to run an animation for a property which is already being animated, the second will override the first. This means you can stop a property's animation by simply "animating" it to its current value with a duration of 0, using queue "false".

An Example:

$myElement = $("#animateElement");
$myElement.animate({width: 500}, {duration: 5000});
$myElement.animate({height: 500}, {duration: 5000, queue: false});
// ... Wait 2 seconds ...
$myElement.animate({width: $myElement.width()}, {duration: 0, queue: false});

Another option was suggested by a gracious jQuery contributor who responded to my enhancement request. This takes advantage of the ability to use a step function on an animation (step functions are called at every point in the animation, and you can manipulate the animation parameters based on whatever criteria you want). Although this also could have solved the issue, I felt it was far more dirty than the "queue: false" option.

like image 55
slifty Avatar answered Nov 01 '22 12:11

slifty