The Animation Queue & Custom .animate
Understand the fx queue, chain animations, and step outside it with stop and delay.
When you call .fadeOut().slideDown(), they don't run at once — jQuery lines them up in a per-element queue named "fx". Each animation runs, then calls the next. Understanding this queue is what separates smooth UIs from janky ones.
Queuing, delay, and stop
$("#box")
.animate({ left: "200px" }, 400)
.delay(200) // pause inside the queue
.animate({ left: "0px" }, 400);.delay(ms)inserts a timed pause between queued steps (it does not delay non-queued things like.css())..stop()halts the current animation;.stop(true)also clears the rest of the queue — essential on hover menus to avoid animation build-up..finish()jumps instantly to the end of every queued animation.
The step callback — animate anything
.animate() can only tween numeric CSS. But its step option exposes the tween value on every frame, letting you animate things jQuery normally can't — like a counter:
$({ n: 0 }).animate({ n: 100 }, {
duration: 1000,
step: function () {
$("#count").text(Math.round(this.n));
}
});That trick — animating a plain object and reading this in step — is how people build animated number counters with nothing but jQuery.
Example
When to use it
- A loading skeleton queues three .animate() calls to replay a shimmer sweep from left to right continuously.
- A game uses .stop(true) to cancel the current animation before starting a new one when the user changes direction.
- A notification toast chains .slideDown(), .delay(3000), and .slideUp() to auto-dismiss after the message is shown.
More examples
Queue three animations in sequence
jQuery queues each .animate() call so they run one after another without nested callbacks.
<div id="ball" style="position:relative;width:40px;height:40px;background:#e74c3c;border-radius:50%;"></div>
<button id="go">Animate</button>
<script>
$(function () {
$("#go").click(function () {
$("#ball")
.animate({ left: "200px" }, 500)
.animate({ top: "80px" }, 500)
.animate({ left: "0px" }, 500)
.animate({ top: "0px" }, 500);
});
});
</script>Stop animation to avoid queuing lag
.stop(true, false) clears the queue and stops the current animation, preventing frames from piling up on rapid clicks.
<div id="panel" style="width:0;height:40px;background:#3498db;overflow:hidden;"></div>
<button id="expand">Expand</button>
<button id="collapse">Collapse</button>
<script>
$(function () {
$("#expand").click(function () {
$("#panel").stop(true, false).animate({ width: "300px" }, 400);
});
$("#collapse").click(function () {
$("#panel").stop(true, false).animate({ width: "0" }, 400);
});
});
</script>Auto-dismiss toast with .delay()
.delay(2500) pauses the fx queue for 2.5 seconds before slideUp runs, creating the auto-dismiss pattern.
<div id="toast" style="display:none;padding:12px;background:#27ae60;color:#fff;">Saved!</div>
<button id="save">Save</button>
<script>
$(function () {
$("#save").click(function () {
$("#toast")
.stop(true, true)
.slideDown(300)
.delay(2500)
.slideUp(400);
});
});
</script>
Discussion