Custom Transitions और Easing
In this page:
$("selector").animate({property: value}, duration, "easingName");
// easingName: "linear", "swing", or a plugin easing such as "easeInQuad"Easing क्या है?
Easing समय के साथ किसी animation के acceleration curve को describe करता है — इसकी speed शुरुआत से अंत तक कैसे बदलती है — constant, unchanging speed के बजाय।
उदाहरण: What is Easing?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="box" style="width:50px">Box</div>
<script>
$("#box").animate({width: "300px"}, 1000, "linear");
</script>
</body>
</html>Ease In और Ease Out
Ease-in किसी animation को धीरे शुरू करता है और अंत की ओर gradually तेज़ हो जाता है, जो कुछ momentum build up करने जैसा महसूस हो सकता है।
उदाहरण: Ease In and Ease Out
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="box" style="width:50px">Box</div>
<script>
$("#box").animate({width: "300px"}, 1000, "easeInQuad");
</script>
</body>
</html>Ease In और Out
Ease-out किसी animation को तेज़ी से शुरू करता है और अपनी final position के पास आते हुए gradually धीमा हो जाता है, physical objects के natural रूप से decelerate होने जैसा।
उदाहरण: Ease In and Out
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="box" style="width:50px">Box</div>
<script>
$("#box").animate({width: "300px"}, 1000, "easeOutQuad");
</script>
</body>
</html>UI Effects के साथ Easing
Ease-in-out एक gentle शुरुआत को एक gentle finish के साथ combine करता है, animation के बीच में speed बढ़ाते हुए। यह अक्सर common ones में सबसे smooth महसूस होता है।
उदाहरण: Easing with UI Effects
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="box" style="width:50px">Box</div>
<script>
$("#box").animate({width: "300px"}, 1000, "easeInOutQuad");
</script>
</body>
</html>एक छोटा Easing Project
jQuery UI के effects — जैसे slide, fade, और bounce — सबको एक specific easing function दिया जा सकता है यह control करने के लिए कि वे exactly कैसे accelerate और decelerate करें।
उदाहरण: Small Easing Project
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="panel" style="display:none">Menu</div>
<script>
$("#panel").show("slide", {}, 500, function() { console.log("Opened with easing"); });
</script>
</body>
</html>- सिर्फ jQuery core loaded होने पर
.animate()में"easeOutBounce"जैसा easing name इस्तेमाल करना, जबकि सिर्फ"swing"और"linear"built in हैं और बाकियों को jQuery UI या एक plugin चाहिए। - easeIn को easeOut से confuse करना, जबकि easeIn धीरे शुरू होता है और तेज़ होता जाता है जबकि easeOut तेज़ शुरू होता है और धीमा होता जाता है।
- यह उम्मीद करना कि easing total duration बदल देगा, जबकि यह सिर्फ यह बदलता है कि उसी duration में speed कैसे distribute होती है।
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: