Animation Queues और stop()
jQuery default रूप से एक ही element पर animations को queue करता है।
Syntax
$(selector).stop(clearQueue, jumpToEnd);
$(selector).queue(function (next) {
// step
next();
});Animations को Queue करना
Default रूप से jQuery किसी element पर हर नए animation को एक queue में जोड़ता है, इसलिए वे overlap होने के बजाय एक के बाद एक चलते हैं। यह multi-step effects को conflicting states के बीच jump करने के बजाय smooth दिखाता रहता है।
उदाहरण: 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>Repeated Clicks पर Queue
अगर कोई user किसी button को जल्दी succession में कई बार click करता है जो एक animation trigger करता है, तो हर click उस element की queue में एक और animation जोड़ता है, जो अगर unchecked छोड़ा जाए तो UI को sluggish या unresponsive महसूस करा सकता है।
उदाहरण: 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()
stop() call करना किसी element पर इस समय चल रहे animation को रोक देता है, लेकिन queue में इंतज़ार कर रहे किसी भी animation को अगला play होना शुरू करने के लिए छोड़ देता है।
उदाहरण: 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)
stop(true) call करना current animation को रोकता है और साथ ही बाकी की queue भी clear कर देता है, किसी queued-up animation को बिल्कुल भी चलने से रोकते हुए।
उदाहरण: 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)
stop(true, true) call करना queue clear करता है और current animation को सीधे उसकी final values पर jump करा देता है, जो hover effects को instantly responsive महसूस कराने के लिए सबसे common pattern है।
उदाहरण: 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. #}
आम गलतियां
- किसी button को बार-बार click करना और animations की एक queue बना देना जो user के रुकने के बाद भी लंबे समय तक चलती रहती है; नया animation शुरू करने से पहले
.stop()जोड़ें। .stop()call करना और पूरी queue clear होने की उम्मीद करना, जबकि यह सिर्फ current animation रोकता है और अगला queued वाला शुरू हो जाता है;.stop(true)queue clear करता है।.stop(true, true)इस्तेमाल करना और उम्मीद करना कि element जहाँ था वहीं रहेगा, जबकि यह सीधे current animation की final state पर jump करता है।
🔒
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: