animate() से Custom Animations
In this page:
$(selector).animate({ property: value }, duration, easing, callback);Basic animate()
animate() method किसी element पर एक या ज़्यादा numeric CSS properties को एक set duration में smoothly नई target values तक transition करती है। यह सिर्फ numeric values वाली properties पर काम करती है, जैसे width या opacity, बिना किसी plugin के colors पर नहीं।
उदाहरण: Basic animate()
<!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() {
$("#output").text("Animating...");
$("#box").animate({width: "300px"}, function() { $("#output").text("Width is now " + $(this).width() + "px"); });
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css({width: "100px"});
$("#output").text("");
});
</script>
</body>
</html>कई Properties
कई properties वाला एक object pass करना, जैसे {width: 200px, opacity: 0.5}, उन सभी को एक call में साथ में animate करता है, आपको कई अलग .animate() calls chain करने से बचाते हुए जो वरना out of sync चलतीं।
उदाहरण: Multiple Properties
<!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;opacity:1">Box</div>
<button id="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text("Animating...");
$("#box").animate({width: "200px", opacity: 0.5}, function() { $("#output").text("Width and opacity animated together"); });
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css({width: "100px", opacity: 1});
$("#output").text("");
});
</script>
</body>
</html>Duration
animate() का दूसरा argument set करता है कि transition में कितना समय लगता है, या तो milliseconds के रूप में या slow या fast जैसा keyword, आपको animation pacing पर direct control देते हुए।
उदाहरण: Duration
<!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() {
$("#output").text("Animating...");
$("#box").animate({width: "300px"}, 2000, function() { $("#output").text("Finished after 2 seconds"); });
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css({width: "100px"});
$("#output").text("");
});
</script>
</body>
</html>Opacity
Opacity उन कुछ non-pixel numeric properties में से एक है जिन्हें animate() out of the box समझता है, आपको एक बड़े multi-property animation के हिस्से के रूप में किसी element को fade in या out करने देते हुए।
उदाहरण: Opacity
<!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="">Box</div>
<button id="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text("Animating...");
$("#box").animate({opacity: 0}, function() { $("#output").text("Opacity is now 0"); });
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css({opacity: 1});
$("#output").text("");
});
</script>
</body>
</html>Relative Values
किसी target value को += या -= से prefix करना, जैसे {left: '+=50px'}, किसी property को उसकी absolute value के बजाय उसकी current value के relative animate करता है, जो किसी element को उसकी starting position चाहे जो भी हो एक fixed amount से nudge करने के लिए उपयोगी है।
उदाहरण: Relative Values
<!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="position:relative;left:0px">Box</div>
<button id="btn">Move Right</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text("Animating...");
$("#box").animate({left: "+=50px"}, function() { $("#output").text("Left is now " + $(this).css("left")); });
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css({left: "0px"});
$("#output").text("");
});
</script>
</body>
</html>- non-numeric values animate करने की कोशिश करना, जैसे
.animate({color: "red"}), जो jQuery core बिना किसी plugin के नहीं कर सकता। - hyphens वाले CSS names लिखना जैसे
{background-color: "red"}, जो एक syntax error है; object में camelCasebackgroundColorइस्तेमाल करें। - बिना set size या
display:inlineवाले किसी element परwidthanimate करना, इसलिए कुछ होता नहीं दिखता क्योंकि inline elements width को नज़रअंदाज़ करते हैं।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: