Sequential animations are added to a default queue called ‘fx’. According to jQuery’s .queue() documentation, queues will execute animations in sequence and asynchronously. In this way, the animations don’t block execution of the program. Like a typical queue data structure, the .queue() method allows developers a way to enqueue a new function at the end of the queue. In this way, animations can be built dynamically.
But while experimenting, I wanted to know how to stop animations. This inquiry opened the door to different possibilities of stopping animations. These techniques are important to know because, as developers, we can better implement our users’ expectations.
Briefly, the .stop() method can take in two booleans that can clear the queue, and stop the current animation. There’s also the .clearQueue() method, where either .finish() or .stop() can be chained to .clearQueue(). Finally, .finish() can be used on its own.
This was a little overwhelming to keep them straight, so I adapted one of jQuery’s examples into a CodePen that demonstrates how animations can be stopped with different arguments and chaining. If you hover over the buttons that contain the methods, a tooltip will appear describing how the method(s)/arguments work.