Animation Queues और stop()
$(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>
</head>
<body>
<div id="box" style="width:100px;height:100px">Box</div>
<script>
$("#box").animate({width: "200px"}).animate({height: "200px"});
</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>
</head>
<body>
<button id="btn">Animate</button>
<div id="box" style="width:100px">Box</div>
<script>
$("#btn").on("click", function() {
$("#box").animate({width: "+=20px"});
});
</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>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<button id="stopBtn">Stop</button>
<script>
$("#box").animate({width: "500px"}, 3000).animate({height: "300px"}, 3000);
$("#stopBtn").on("click", function() {
$("#box").stop();
});
</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>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<button id="stopBtn">Stop</button>
<script>
$("#box").animate({width: "500px"}, 3000).animate({height: "300px"}, 3000);
$("#stopBtn").on("click", function() {
$("#box").stop(true);
});
</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>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<button id="stopBtn">Stop</button>
<script>
$("#box").animate({width: "500px"}, 3000);
$("#stopBtn").on("click", function() {
$("#box").stop(true, true);
});
</script>
</body>
</html>- किसी 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: