jQuery animate() मेथड निर्दिष्ट CSS प्रॉपर्टीज़ पर कस्टम एनिमेशन करता है। यह कई तर्क स्वीकार करता है। पहला तर्क CSS परिवर्तनों को शामिल करने वाला एक ऑब्जेक्ट है। दूसरा तर्क अवधि और कॉलबैक फ़ंक्शन जैसे कई विकल्पों को संभालने में सक्षम है।
animate() के लिए बड़ी संख्या में विकल्प उपलब्ध हैं। यह परिचय एक शुरुआती प्राइमर तक सीमित होगा। हम jQuery animate के सिंटैक्स के साथ-साथ उदाहरण कोड देखेंगे। हमारा उदाहरण कोड दिखाएगा कि animate() का उपयोग करके <div> को कैसे विस्तारित किया जाए।
jQuery animate() का उपयोग क्यों करें?
jQuery animate() के लिए कई उपयोग के मामले हैं। सीधे शब्दों में कहें, आप इस मेथड का उपयोग किसी भी समय कर सकते हैं जब आपके एप्लिकेशन को फ्रंट एंड पर एनिमेशन की आवश्यकता होती है। यह मेथड एक डायनामिक और जटिल समाधान प्रदान करता है।
एनिमेशन फ्रंट एंड डेवलपमेंट में मानक अभ्यास बन गया है। animate() का उपयोग करके पर्याप्त अभ्यास के साथ, आप अपने प्रोजेक्ट के फ्रंट एंड पर एनिमेशन को बिना समय के लागू कर देंगे। आइए कुछ सिंटैक्स सीखकर शुरू करें।
jQuery animate() सिंटैक्स
जैसा कि हमने संक्षेप में चर्चा की, animate() एक CSS ऑब्जेक्ट का तर्क लेता है। यह चयनित CSS प्रॉपर्टीज़ के नए मानों को शामिल करने वाला एक ऑब्जेक्ट है। एक सर्वोत्तम अभ्यास यह है कि animate() का उपयोग केवल उस एलिमेंट पर करें जिसे स्टाइलशीट में संदर्भित किया गया है।
सभी jQuery मेथड्स की तरह, animate() को एक चयनित एलिमेंट से जोड़ा जाना चाहिए। वहां से, animate() को कॉल करें और वांछित अंतिम रूप के मानों के साथ CSS प्रॉपर्टीज़ का एक ऑब्जेक्ट पास करें। यह उल्लेख करना महत्वपूर्ण है कि animate() केवल CSS के न्यूमेरिकल प्रॉपर्टीज़ के साथ काम करता है। कलर या फॉन्ट टाइप जैसे एट्रिब्यूट्स को animate() द्वारा पढ़ा नहीं जाएगा।
jQuery animate() एक्शन में
आइए उपरोक्त व्याख्या को कोड में तोड़कर इसे और स्पष्ट करें, एक बटन और <div> के बेसिक HTML रेंडरिंग से शुरू करते हुए।
HTML <button id="click">Click Me</button> <div id="block">Watch Me!</div>
दोनों एलिमेंट्स में id एट्रिब्यूट्स हैं। हम उनका उपयोग jQuery के साथ उन्हें चुनने के लिए करेंगे। अब देखते हैं कि हम <div> को कैसे स्टाइल कर सकते हैं ताकि हम animate() का उपयोग कर सकें।
CSS div { background-color: lightblue; width: 100px; border: 1px solid blue; }
यहां, हमने <div> को बैकग्राउंड कलर, चौड़ाई, और एक छोटे बॉर्डर के साथ स्टाइल किया है। जब हम jQuery का उपयोग करके अपने <div> का चयन करते हैं, तो हम animate() को CSS एट्रिब्यूट्स का एक ऑब्जेक्ट पास कर सकते हैं। ये एट्रिब्यूट्स उन अंतिम परिवर्तनों को प्रतिबिंबित करेंगे जिन्हें हम देखना चाहते हैं।
$('#click').click(function() { $('#block').animate({ width: '70%', fontSize: '3em', borderWidth: '10px' }) })
यदि हम jQuery को तोड़ते हैं, तो हम देखते हैं कि हमने क्लिक के id एट्रिब्यूट द्वारा बटन का चयन किया है। फिर हम jQuery click() मेथड को कॉल करते हैं ताकि एक इवेंट हैंडलर संलग्न हो सके जो क्लिक प्राप्त करने की प्रतीक्षा करता है। एक बार click() क्लिक इवेंट का पता लगाता है, यह कॉलबैक फ़ंक्शन को निष्पादित करेगा।
आपकी याददाश्त ताज़ा करने के लिए, एक कॉलबैक फ़ंक्शन एक फ़ंक्शन है जिसे किसी अन्य फ़ंक्शन में पास किया जाता है जिसे बाद में निष्पादित किया जाएगा। इस मामले में, यह क्लिक इवेंट का पता चलने के बाद है। jQuery click() के बारे में यहां और पढ़ें।
कॉलबैक फ़ंक्शन के अंदर, हम अपने <div> का चयन करते हैं। हमारी बटन की तरह, हम ब्लॉक के id एट्रिब्यूट का उपयोग करके इसे चुन रहे हैं। अब हम <div> पर animate() को कॉल करते हैं और इसे अपना CSS ऑब्जेक्ट पास करते हैं।
ध्यान दें कि fontSize और borderWidth CSS में उन्हें घोषित करने के तरीके से कैसे भिन्न हैं। यह है कि jQuery CSS प्रॉपर्टीज़ को कैसे स्वीकार करता है जो आमतौर पर हाइफ़नेटेड होते हैं।
हमारे CSS ऑब्जेक्ट में मान वही हैं जो हम एनिमेशन पूरा होने के बाद रेंडर करना चाहते हैं। अब, जब हम बटन पर क्लिक करते हैं, तो हम <div> को एनिमेट होते देखेंगे:
यह काम कर गया! हम <div> की सामग्री को एक साथ विस्तारित होते हुए देखते हैं जब तक कि नए CSS मानों तक नहीं पहुंच जाते।
निष्कर्ष
jQuery animate() के इस शुरुआती प्राइमर में, हमने सीखा कि animate() एक CSS ऑब्जेक्ट पर एनिमेशन करता है। वह CSS ऑब्जेक्ट अंतिम डिस्प्ले मानों के साथ मेथड को पास किया जाता है। यह दोहराना उचित है कि केवल न्यूमेरिकल CSS मान animate() द्वारा पढ़े जाएंगे। बैकग्राउंड कलर और फॉन्ट टाइप जैसी प्रॉपर्टीज़ को animate() द्वारा नहीं पढ़ा जाएगा।
jQuery animate() के साथ कवर करने के लिए बहुत अधिक जमीन है, इसलिए जब यह परिचय समझ में आ जाए, तो यहां क्लिक करें। आधिकारिक दस्तावेज़ीकरण को पढ़ना और शामिल उदाहरणों के साथ अभ्यास करना हमेशा अच्छा अभ्यास है। jQuery animate() पहली बार में काफी जटिल लग सकता है, लेकिन नियमित अभ्यास के साथ, आप जितना सोचते हैं उससे जल्दी एनिमेशन में महारत हासिल कर लेंगे!
