Command stop

- NOTE: This documentation is for Velocity v2.

Command: Stop

Overview

To immediately stop all current Velocity calls (including parallel animations called via queue: false) on an element, pass in "stop" as Velocity's first argument. The next Velocity call in the element's animation queue immediately starts.

If you're stopping a custom queue, pass the queue's name as the second parameter. Or, to only stop parallel animations (calls made with queue: false) but not the current default queue animation, pass false as the custom queue name.

If no queue name is passed then all queues on the elements are stopped.

element.velocity("stop"); // Normal stop
element.velocity("stop", "myQueue"); // Custom queue stop

When a call is stopped, its complete callback and is skipped.

You may pass an additional value of true to stop all queued animations on the elements on the named queue (or all queues if no queue name is passed).

When a call is stopped, the next Velocity call in the element's queue chain fires immediately.

element
    .velocity({ width: 100 })
    .velocity({ height: 200 });
element.velocity("stop", true);

Above, the initial { width: 100 } call will be instantly stopped, and the ensuing { height: 200 } will be removed and skipped entirely (it will never run).

Stopping Specific Animations

When creating an animation Velocity returns a VelocityResult object. This is an array of the animated elements, with some extra callbacks attached to it such as .velocity(...) and the Promise functions. When targeting the elements directly tou are affecting everything on that element, but when using this result object it will only target the animations added i the original call.

For instance, this code will create two chained animations, the first changes the width, while the second fades the elements out. By calling on the result directly it will stop the fade, but the width change will continue normally:

elements.velocity({ width: 500 });
var result = elements.velocity({ opacity: 0 });

result.velocity("stop"); // Stop opacity change

If you wish to target the elements on a chain, then pass it as the first argument to Velocity(), and it will not be classed as chaining for those specific animations, stopping the width change and not the opacity:

elements.velocity({ width: 500 });
var result = elements.velocity({ opacity: 0 });

Velocity(result, "stop"); // Stop width change

As opposed to this, where the width change will be stopped, but the opacity will still happen:

elements.velocity({ width: 500 });
var result = elements.velocity({ opacity: 0 });

elements.velocity("stop"); // Stop width change

NOTE: Because of the nature of chaining, the result will be the last animation when saving it. If you wish to save the first then dont't chain them all together, instead chain from the result itself:

var heightResult = element
    .velocity({ width: 100 })
    .velocity({ height: 200 });

var widthResult = element
    .velocity({ width: 100 });
widthResult.velocity({ height: 200 });

Difference to finish

While the stop command will immediately stop a running animation, the finish command will also change the element values to match the final values of the animation.