jQuery एनीमेशन का उपयोग वेब पेज पर कस्टम एनिमेशन प्रभाव जोड़ने के लिए किया जाता है। यह फीचर आपको विभिन्न HTML तत्वों पर जटिल एनिमेशन बनाने और नियंत्रित करने की अनुमति देता है, जिससे आपके वेब पेज को अधिक आकर्षक और इंटरैक्टिव बनाया जा सकता है। jQuery एनीमेशन का सिंटैक्स सरल है और यह वेब डेवलपर्स के लिए एक शक्तिशाली उपकरण है।
इस अध्याय में, हम jQuery एनीमेशन की विभिन्न तकनीकों और उनके उपयोग के बारे में जानेंगे। हम निम्नलिखित महत्वपूर्ण बिंदुओं पर चर्चा करेंगे:
- बेसिक एनीमेशन (Basic Animation): jQuery के animate() मेथड का उपयोग करके सरल एनिमेशन बनाना।
- कस्टम एनीमेशन (Custom Animation): विभिन्न CSS प्रॉपर्टीज़ को एनिमेट करना और कस्टम एनिमेशन प्रभाव बनाना।
- एनिमेशन चेनिंग (Animation Chaining): कई एनिमेशन को एक के बाद एक चलाना।
- एनिमेशन कंट्रोल (Animation Control): एनिमेशन को रोकना, फिर से शुरू करना और समाप्त करना।
इस अध्याय के अंत तक, आप सीखेंगे कि कैसे jQuery का उपयोग करके अपने वेब पेज पर प्रभावशाली एनिमेशन बनाए जा सकते हैं। आइए, jQuery एनीमेशन की इस रोचक यात्रा को शुरू करें और इसके शक्तिशाली फीचर्स का लाभ उठाएं।
बेसिक एनीमेशन (Basic Animation)
jQuery के बेसिक एनीमेशन का उपयोग HTML तत्वों पर सरल और प्रभावी एनिमेशन प्रभाव बनाने के लिए किया जाता है। jQuery का animate() मेथड आपको विभिन्न CSS प्रॉपर्टीज़ को एनिमेट करने की अनुमति देता है, जिससे आप आसानी से कस्टम एनिमेशन बना सकते हैं।
सिंटैक्स
$(सेलेक्टर).animate({properties}, duration, callback);
- सेलेक्टर: उस HTML तत्व का चयन करता है जिसे एनिमेट किया जाना है।
- properties: CSS प्रॉपर्टीज़ और उनके एनिमेशन वैल्यूज़ का एक ऑब्जेक्ट।
- duration: एनिमेशन की अवधि (मिलीसेकंड में या ‘slow’/’fast’)।
- callback: एक फंक्शन है जो एनिमेशन के पूरा होने पर निष्पादित होता है।
उदाहरण
1. पोजिशन और साइज़ एनिमेट करना (Animating Position and Size):
<!DOCTYPE html>
<html>
<head>
<title>Basic Animation Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("#myDiv").animate({
left: '250px',
width: '+=100px',
height: '+=100px',
opacity: 0.5
}, "slow");
});
});
</script>
<style>
#myDiv {
position: relative;
background-color: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<button id="animateButton">Animate Div</button>
</body>
</html>
इस उदाहरण में, जब बटन (#animateButton) पर क्लिक किया जाता है, तब #myDiv तत्व की पोजिशन बाईं ओर 250 पिक्सल स्थानांतरित हो जाती है, उसकी चौड़ाई और ऊंचाई 100 पिक्सल बढ़ जाती है, और उसकी अपारदर्शिता (opacity) 0.5 हो जाती है।
2. रंग और पृष्ठभूमि एनिमेट करना (Animating Color and Background):
<!DOCTYPE html>
<html>
<head>
<title>Basic Animation Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#colorButton").click(function(){
$("#myDiv").animate({
backgroundColor: "#ff0000",
color: "#ffffff"
}, "slow");
});
});
</script>
<style>
#myDiv {
background-color: yellow;
color: black;
width: 100px;
height: 100px;
padding: 20px;
}
</style>
</head>
<body>
<div id="myDiv">Hello World</div>
<button id="colorButton">Animate Color</button>
</body>
</html>
इस उदाहरण में, जब बटन (#colorButton) पर क्लिक किया जाता है, तब #myDiv तत्व की पृष्ठभूमि रंग लाल हो जाती है और टेक्स्ट का रंग सफेद हो जाता है।
jQuery का बेसिक एनीमेशन बहुत ही शक्तिशाली और उपयोग में आसान है। इसके उपयोग से आप अपने वेब पेज पर विभिन्न CSS प्रॉपर्टीज़ को एनिमेट कर सकते हैं और अपने पेज को अधिक इंटरैक्टिव और आकर्षक बना सकते हैं। अब, आप इन बेसिक एनिमेशन का उपयोग अपने प्रोजेक्ट्स में करके अपने वेब पेज को अधिक गतिशील बना सकते हैं।
कस्टम एनीमेशन (Custom Animation)
jQuery के कस्टम एनीमेशन का उपयोग HTML तत्वों पर जटिल और कस्टम एनिमेशन प्रभाव बनाने के लिए किया जाता है। यह फीचर आपको विभिन्न CSS प्रॉपर्टीज़ को एनिमेट करने की अनुमति देता है, जिससे आप अपने वेब पेज को अधिक इंटरैक्टिव और आकर्षक बना सकते हैं।
कस्टम एनीमेशन का सिंटैक्स
$(सेलेक्टर).animate({properties}, duration, easing, callback);
- सेलेक्टर: उस HTML तत्व का चयन करता है जिसे एनिमेट किया जाना है।
- properties: CSS प्रॉपर्टीज़ और उनके एनिमेशन वैल्यूज़ का एक ऑब्जेक्ट।
- duration: एनिमेशन की अवधि (मिलीसेकंड में या ‘slow’/’fast’)।
- easing: एनिमेशन की गति को नियंत्रित करता है (‘swing’ या ‘linear’)।
- callback: एक फंक्शन है जो एनिमेशन के पूरा होने पर निष्पादित होता है।
उदाहरण
1. कस्टम पोजिशन और साइज़ एनिमेशन (Custom Position and Size Animation):
<!DOCTYPE html>
<html>
<head>
<title>Custom Animation Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("#myDiv").animate({
left: '250px',
width: '150px',
height: '150px',
opacity: 0.8
}, {
duration: 1000,
easing: 'swing',
complete: function(){
alert("Animation Complete!");
}
});
});
});
</script>
<style>
#myDiv {
position: relative;
background-color: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<button id="animateButton">Animate Div</button>
</body>
</html>
इस उदाहरण में, जब बटन (#animateButton) पर क्लिक किया जाता है, तब #myDiv तत्व की पोजिशन बाईं ओर 250 पिक्सल स्थानांतरित हो जाती है, उसकी चौड़ाई और ऊंचाई 150 पिक्सल हो जाती है, और उसकी अपारदर्शिता (opacity) 0.8 हो जाती है। एनिमेशन 1000 मिलीसेकंड (1 सेकंड) में पूरा होता है और ‘swing’ इज़िंग का उपयोग करता है। एनिमेशन पूरा होने पर एक अलर्ट बॉक्स प्रदर्शित होता है।
2. कस्टम रंग और पृष्ठभूमि एनिमेशन (Custom Color and Background Animation):
<!DOCTYPE html>
<html>
<head>
<title>Custom Animation Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#colorButton").click(function(){
$("#myDiv").animate({
backgroundColor: "#ff0000",
color: "#ffffff"
}, {
duration: 1500,
easing: 'linear',
complete: function(){
alert("Color Animation Complete!");
}
});
});
});
</script>
<style>
#myDiv {
background-color: yellow;
color: black;
width: 100px;
height: 100px;
padding: 20px;
}
</style>
</head>
<body>
<div id="myDiv">Hello World</div>
<button id="colorButton">Animate Color</button>
</body>
</html>
इस उदाहरण में, जब बटन (#colorButton) पर क्लिक किया जाता है, तब #myDiv तत्व की पृष्ठभूमि का रंग लाल हो जाता है और टेक्स्ट का रंग सफेद हो जाता है। एनिमेशन 1500 मिलीसेकंड (1.5 सेकंड) में पूरा होता है और ‘linear’ इज़िंग का उपयोग करता है। एनिमेशन पूरा होने पर एक अलर्ट बॉक्स प्रदर्शित होता है।
jQuery का कस्टम एनीमेशन फीचर बहुत ही शक्तिशाली और उपयोग में आसान है। इसके उपयोग से आप अपने वेब पेज पर विभिन्न CSS प्रॉपर्टीज़ को एनिमेट कर सकते हैं और अपने पेज को अधिक इंटरैक्टिव और आकर्षक बना सकते हैं। अब, आप इन कस्टम एनीमेशन का उपयोग अपने प्रोजेक्ट्स में करके अपने वेब पेज को अधिक गतिशील बना सकते हैं।
एनीमेशन चेनिंग (Animation Chaining)
jQuery में एनीमेशन चेनिंग का उपयोग एक के बाद एक कई एनीमेशन प्रभाव लागू करने के लिए किया जाता है। एनीमेशन चेनिंग का मतलब है कि आप एक ही तत्व पर एक के बाद एक कई मेथड्स को चेन करके कॉल कर सकते हैं, जिससे एनिमेशन को क्रम में निष्पादित किया जा सकता है। यह फीचर आपके कोड को अधिक पठनीय और प्रबंधनीय बनाता है।
एनीमेशन चेनिंग का सिंटैक्स
$(सेलेक्टर).animate({properties}, duration)
.animate({properties}, duration)
.animate({properties}, duration);
- सेलेक्टर: उस HTML तत्व का चयन करता है जिसे एनिमेट किया जाना है।
- properties: CSS प्रॉपर्टीज़ और उनके एनिमेशन वैल्यूज़ का एक ऑब्जेक्ट।
- duration: एनिमेशन की अवधि (मिलीसेकंड में या ‘slow’/’fast’)।
उदाहरण
1. कई एनीमेशन प्रभावों को चेनिंग (Chaining Multiple Animation Effects):
<!DOCTYPE html>
<html>
<head>
<title>Animation Chaining Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("#myDiv").animate({left: '250px'}, "slow")
.animate({opacity: '0.5'}, "slow")
.animate({height: '150px', width: '150px'}, "slow");
});
});
</script>
<style>
#myDiv {
position: relative;
background-color: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<button id="animateButton">Animate Div</button>
</body>
</html>
इस उदाहरण में, जब बटन (#animateButton) पर क्लिक किया जाता है, तब #myDiv तत्व पर तीन एनीमेशन क्रम में लागू होते हैं:
- #myDiv बाईं ओर 250 पिक्सल स्थानांतरित हो जाता है।
- #myDiv की अपारदर्शिता (opacity) 0.5 हो जाती है।
- #myDiv की ऊँचाई और चौड़ाई 150 पिक्सल हो जाती है।
2. अधिक जटिल चेनिंग (More Complex Chaining):
<!DOCTYPE html>
<html>
<head>
<title>Complex Animation Chaining Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("#myDiv").animate({left: '250px'}, "slow")
.animate({opacity: '0.5'}, "slow")
.animate({height: '150px', width: '150px'}, "slow")
.animate({top: '50px'}, "slow")
.animate({left: '0px'}, "slow")
.animate({opacity: '1'}, "slow")
.animate({height: '100px', width: '100px'}, "slow");
});
});
</script>
<style>
#myDiv {
position: relative;
background-color: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<button id="animateButton">Animate Div</button>
</body>
</html>
इस उदाहरण में, जब बटन (#animateButton) पर क्लिक किया जाता है, तब #myDiv तत्व पर सात एनीमेशन क्रम में लागू होते हैं:
- #myDiv बाईं ओर 250 पिक्सल स्थानांतरित हो जाता है।
- #myDiv की अपारदर्शिता (opacity) 0.5 हो जाती है।
- #myDiv की ऊँचाई और चौड़ाई 150 पिक्सल हो जाती है।
- #myDiv ऊपर की दिशा में 50 पिक्सल स्थानांतरित हो जाता है।
- #myDiv बाईं ओर 0 पिक्सल पर वापस आ जाता है।
- #myDiv की अपारदर्शिता (opacity) 1 हो जाती है।
- #myDiv की ऊँचाई और चौड़ाई 100 पिक्सल हो जाती है।
jQuery में एनीमेशन चेनिंग का उपयोग करना बहुत ही आसान और शक्तिशाली है। यह फीचर आपको एक के बाद एक कई एनीमेशन प्रभाव लागू करने की अनुमति देता है, जिससे आपके कोड को अधिक पठनीय और प्रबंधनीय बनाया जा सकता है। अब, आप इन एनीमेशन चेनिंग का उपयोग अपने प्रोजेक्ट्स में करके अपने वेब पेज को अधिक गतिशील और आकर्षक बना सकते हैं।