Animation Callback Functions
In this page:
$(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>
</head>
<body>
<div id="box">Box</div>
<script>
$("#box").fadeOut(1000, function() {
console.log("Fade complete");
});
</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>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<script>
$("#box").animate({width: "300px"}, function() {
console.log("Animation complete");
});
</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>
</head>
<body>
<div id="box">Box</div>
<script>
$("#box").fadeOut(1000, function() {
$(this).remove();
});
</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>
</head>
<body>
<div id="box" data-name="mybox">Box</div>
<script>
$("#box").fadeOut(1000, function() {
console.log($(this).data("name"));
});
</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>
</head>
<body>
<div id="box">Box</div>
<script>
$("#box").slideUp(500, function() {
$(this).fadeOut(500);
});
</script>
</body>
</html>- 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: