Animation Callback फंक्शन्स
एक callback किसी animation खत्म होने के बाद चलती है।
In this page:
Syntax
$(selector).effect(speed, function () {
// runs after the effect completes
});Completion Callback
एक completion callback एक function है जिसे किसी effect method के आख़िरी argument के रूप में pass किया जाता है, और jQuery इसे सिर्फ उस specific animation के खत्म होने के बाद चलाता है।
उदाहरण: Completion Callback
<!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">Box</div>
<button id="btn">Fade Out</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#box").fadeOut(1000, function() {
$("#output").text("Fade complete");
});
});
$("#resetBtn").on("click", function() {
$("#box").stop(true, true).show();
$("#output").text("");
});
</script>
</body>
</html>animate() Callback
animate() भी simpler effect methods की तरह ही अपने आख़िरी argument के रूप में एक callback accept करता है, इसे तभी चलाते हुए जब यह control करने वाली property transitions पूरी तरह complete हो जाएँ।
उदाहरण: animate() Callback
<!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="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#box").animate({width: "300px"}, function() {
$("#output").text("Animation complete");
});
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css("width", "100px");
$("#output").text("");
});
</script>
</body>
</html>एक और Action चलाना
Callbacks किसी animation के अंत में behavior chain करने का standard तरीका हैं -- उदाहरण के लिए किसी element को DOM से सिर्फ तभी हटाना जब वह fade out खत्म कर चुका हो, तुरंत हटाकर animation को बीच में काटने के बजाय।
उदाहरण: Run Another Action
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: #1a1a1a; padding: 10px; border-radius: 4px; }
</style>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<div id="box">Box</div>
<button id="btn">Fade Out and Remove</button>
<div id="output"></div>
</section>
<script>
var original = $("#demo").html();
function init() {
$("#btn").on("click", function() {
$("#box").fadeOut(1000, function() {
$(this).remove();
$("#output").text("Box removed from the DOM (reload to reset)");
});
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Callback में this
किसी jQuery animation callback के अंदर, keyword this उस raw DOM element को refer करता है जो animate किया गया था, कोई jQuery object नहीं, इसलिए उस पर दूसरी jQuery methods call करने से पहले इसे आमतौर पर $(this) में wrap करना पड़ता है।
उदाहरण: Callback this
<!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" data-name="mybox">Box</div>
<button id="btn">Fade Out</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#box").fadeOut(1000, function() {
$("#output").text("this.data-name = " + $(this).data("name"));
});
});
$("#resetBtn").on("click", function() {
$("#box").stop(true, true).show();
$("#output").text("");
});
</script>
</body>
</html>Callback और Queue
किसी completion callback के अंदर से एक दूसरा animation शुरू करना आपको multi-step sequences बनाने देता है, जैसे किसी element को ऊपर slide करना फिर उसे fade out करना, बिना दोनों effects एक साथ चलाए।
उदाहरण: Callback and Queue
<!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">Box</div>
<button id="btn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#box").slideUp(500, function() {
$("#output").text("slideUp finished, running fadeOut in the callback");
$(this).fadeOut(500);
});
});
$("#resetBtn").on("click", function() {
$("#box").stop(true, true).show();
$("#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. #}
आम गलतियां
- callback के बजाय
.fadeOut(1000)के बाद follow-up code लिखना, इसलिए यह animation अभी भी चलते हुए तुरंत चल जाता है। - callback के रूप में एक arrow function इस्तेमाल करना और फिर
$(this)पर निर्भर रहना, जो अब animated element को refer नहीं करता। - callback को parentheses के साथ pass करना जैसे
.fadeOut(1000, done()), जो animation खत्म होने के बजायdoneको तुरंत चला देता है।
🔒
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: