Animation Queues and stop()
jQuery queues animations on the same element by default.
In this page:
Syntax
$(selector).stop(clearQueue, jumpToEnd);
$(selector).queue(function (next) {
// step
next();
});Queue Animations
By default jQuery adds each new animation on an element onto a queue, so they play one after another instead of overlapping. This keeps multi-step effects looking smooth instead of jumping between conflicting states.
Example: Queue Animations
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="width:100px;height:100px">Box</div>
<button id="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text("Widening, then growing taller...");
$("#box").animate({width: "200px"}).animate({height: "200px"}, function() {
$("#output").text("Both animations finished");
});
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css({width: "100px", height: "100px"});
$("#output").text("");
});
</script>
</body>
</html>Queue on Repeated Clicks
If a user clicks a button that triggers an animation multiple times in quick succession, each click adds another animation to that element's queue, which can make the UI feel sluggish or unresponsive if left unchecked.
Example: Queue on Repeated Clicks
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<button id="btn">Animate</button>
<div id="box" style="width:100px">Box</div>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#box").animate({width: "+=20px"}, function() {
$("#output").text("Width: " + $(this).width() + "px (click quickly to queue several)");
});
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css("width", "100px");
$("#output").text("");
});
</script>
</body>
</html>stop()
Calling stop() halts whichever animation is currently running on an element, but leaves any animations still waiting in the queue to begin playing next.
Example: stop()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#startBtn").on("click", function() {
$("#output").text("Animating...");
$("#box").animate({width: "500px"}, 3000).animate({height: "300px"}, 3000);
});
$("#stopBtn").on("click", function() {
$("#box").stop();
$("#output").text("stop() halts the current animation; the queued height animation then starts");
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css({width: "100px", height: "auto"});
$("#output").text("");
});
</script>
</body>
</html>stop(true)
Calling stop(true) both halts the current animation and clears out the rest of the queue, preventing any queued-up animations from running at all.
Example: stop(true)
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#startBtn").on("click", function() {
$("#output").text("Animating...");
$("#box").animate({width: "500px"}, 3000).animate({height: "300px"}, 3000);
});
$("#stopBtn").on("click", function() {
$("#box").stop(true);
$("#output").text("stop(true) halts the current animation and clears the queue");
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css({width: "100px", height: "auto"});
$("#output").text("");
});
</script>
</body>
</html>stop(true,true)
Calling stop(true, true) clears the queue and also jumps the current animation straight to its final values, which is the pattern most commonly used to make hover effects feel instantly responsive.
Example: stop(true,true)
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#startBtn").on("click", function() {
$("#output").text("Animating...");
$("#box").animate({width: "500px"}, 3000);
});
$("#stopBtn").on("click", function() {
$("#box").stop(true, true);
$("#output").text("stop(true, true) clears the queue and jumps to the end state");
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css({width: "100px", height: "auto"});
$("#output").text("");
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Clicking a button repeatedly and building up a queue of animations that keep running long after the user stops; add
.stop()before the new animation. - Calling
.stop()and expecting the whole queue to be cleared, when it only stops the current animation and the next queued one starts;.stop(true)clears the queue. - Using
.stop(true, true)and expecting the element to stay where it was, when it jumps straight to the final state of the current animation.
🔒
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: