मास्टर jQuery एनिमेट():कस्टम सीएसएस एनिमेशन के लिए एक त्वरित गाइड

<पी> jQuery animate() विधि निर्दिष्ट सीएसएस गुणों पर कस्टम एनिमेशन निष्पादित करती है। यह अनेक तर्कों को स्वीकार करता है। पहला तर्क एक ऑब्जेक्ट है जिसमें किए जाने वाले सीएसएस परिवर्तन शामिल हैं। दूसरा तर्क अवधि और कॉलबैक फ़ंक्शन जैसे कई विकल्पों को संभालने में सक्षम है।
<पी> animate() के लिए बड़ी संख्या में विकल्प उपलब्ध हैं . यह परिचय आरंभिक प्राइमर तक ही सीमित रहेगा। हम jQuery एनिमेट के सिंटैक्स के साथ-साथ उदाहरण कोड को भी देखेंगे। हमारा उदाहरण कोड दिखाएगा कि animate() का उपयोग करके

का विस्तार कैसे किया जाए .

jQuery एनिमेट() का उपयोग क्यों करें?

<पी> jQuery animate() के लिए कई उपयोग के मामले हैं . सीधे शब्दों में कहें तो, आप इस पद्धति का उपयोग किसी भी समय कर सकते हैं जब आपके एप्लिकेशन को फ्रंट एंड पर एनीमेशन की आवश्यकता हो। यह विधि एक गतिशील और जटिल समाधान प्रदान करती है।
<पी> फ्रंट एंड डेवलपमेंट में एनीमेशन मानक अभ्यास बन गया है। animate() का उपयोग करके पर्याप्त अभ्यास के साथ , आप कुछ ही समय में अपने प्रोजेक्ट के फ्रंट एंड पर एनीमेशन लागू कर देंगे। आइए कुछ वाक्यविन्यास सीखकर शुरुआत करें।

jQuery एनिमेट() सिंटैक्स

<पी> जैसा कि हमने संक्षेप में चर्चा की है, animate() CSS ऑब्जेक्ट का तर्क लेता है। यह एक ऑब्जेक्ट है जिसमें चयनित सीएसएस गुणों के नए मान शामिल हैं। सर्वोत्तम अभ्यास केवल animate() का उपयोग करना है स्टाइलशीट में संदर्भित तत्व पर।
<पी> सभी jQuery विधियों की तरह, animate() किसी चयनित तत्व से जुड़ा होना चाहिए. वहां से, animate() पर कॉल करें और वांछित अंतिम रूप के मूल्यों के साथ सीएसएस गुणों के एक ऑब्जेक्ट में पास करें। यहां यह बताना जरूरी है कि animate() केवल सीएसएस के संख्यात्मक गुणों के साथ काम करता है। रंग या फ़ॉन्ट प्रकार जैसी विशेषताएं animate() द्वारा नहीं पढ़ी जाएंगी .

jQuery एनिमेट() एक्शन में

<पी> आइए इसे और अधिक स्पष्ट करने के लिए उपरोक्त स्पष्टीकरण को कोड में तोड़ें, एक बटन और एक

के मूल HTML प्रतिपादन से शुरू करें।

HTML
<button id="click">Click Me</button>
<div id="block">Watch Me!</div>

<पी> दोनों तत्वों में आईडी विशेषताएँ हैं। jQuery के साथ उन्हें चुनने के लिए हम इसका उपयोग करेंगे। अब आइए देखें कि हम

को कैसे स्टाइल कर सकते हैं ताकि हम animate() का उपयोग कर सकें .

CSS
 div {
 background-color: lightblue;
 width: 100px;
 border: 1px solid blue;
 }

<पी> यहां, हमने

को पृष्ठभूमि रंग, चौड़ाई और एक छोटी सीमा के साथ स्टाइल किया है। जब हम अपना

चुनने के लिए jQuery का उपयोग करते हैं, तो हम animate() पास कर सकते हैं सीएसएस विशेषताओं का एक ऑब्जेक्ट। ये विशेषताएँ उन अंतिम परिवर्तनों को प्रतिबिंबित करेंगी जिन्हें हम देखना चाहते हैं।

$('#click').click(function() {
 $('#block').animate({
 width: '70%',
 fontSize: '3em',
 borderWidth: '10px'
 })
})

<पी> यदि हम jQuery को तोड़ते हैं, तो हम देखते हैं कि हमने क्लिक की आईडी विशेषता द्वारा बटन का चयन किया है। फिर हम jQuery click() को कॉल करते हैं एक इवेंट हैंडलर संलग्न करने की विधि जो एक क्लिक प्राप्त करने की प्रतीक्षा करती है। एक बार click() क्लिक ईवेंट प्राप्त करता है, यह कॉलबैक फ़ंक्शन निष्पादित करेगा।
<पी> आपकी मेमोरी को ताज़ा करने के लिए, कॉलबैक फ़ंक्शन किसी अन्य फ़ंक्शन को पास किया गया फ़ंक्शन है जिसे बाद में निष्पादित किया जाएगा। इस मामले में, यह एक क्लिक इवेंट का पता चलने के बाद होता है। jQuery click() के बारे में और पढ़ें यहाँ.
<पी> कॉलबैक फ़ंक्शन के अंदर आगे बढ़ते हुए, हम अपना

चुनते हैं। हमारे बटन की तरह, हम इसे चुनने के लिए ब्लॉक की आईडी विशेषता का उपयोग कर रहे हैं। अब हम animate() पर कॉल करते हैं

पर और इसे अपना सीएसएस ऑब्जेक्ट पास करें।
<पी> ध्यान दें कि फ़ॉन्ट आकार और बॉर्डरविड्थ उन्हें घोषित करने के सीएसएस तरीके से कैसे भिन्न हैं। इस प्रकार jQuery CSS गुणों को स्वीकार करता है जो आमतौर पर हाइफ़नेटेड होते हैं।
<पी> हमारे सीएसएस ऑब्जेक्ट में मान वही हैं जो हम एनीमेशन पूरा होने के बाद प्रस्तुत करना चाहते हैं। अब, जब हम बटन पर क्लिक करते हैं, तो हम

एनिमेट देखेंगे:
मास्टर jQuery एनिमेट():कस्टम सीएसएस एनिमेशन के लिए एक त्वरित गाइड

<पी> यह काम कर गया! हम

की सामग्री को नए CSS मानों तक पहुंचने तक एक साथ विस्तारित होते हुए देखते हैं।

निष्कर्ष

<पी> इस शुरुआती प्राइमर में jQuery animate() , हमने सीखा कि animate() CSS ऑब्जेक्ट पर एनिमेशन निष्पादित करता है। उस सीएसएस ऑब्जेक्ट को अंतिम प्रदर्शन मानों के साथ विधि में भेज दिया जाता है। यह दोहराना आवश्यक है कि animate() द्वारा केवल संख्यात्मक सीएसएस मान ही पढ़े जाएंगे . पृष्ठभूमि रंग और फ़ॉन्ट प्रकार जैसे गुण नहीं पढ़े जाएंगे।
<पी> jQuery animate() के साथ कवर करने के लिए और भी बहुत कुछ है , इसलिए जब यह परिचय समझ में आए, तो यहां क्लिक करें। आधिकारिक दस्तावेज को पढ़ना और इसमें शामिल उदाहरणों के साथ अभ्यास करना हमेशा अच्छा अभ्यास है। jQuery animate() पहली बार में यह काफी जटिल लग सकता है, लेकिन नियमित अभ्यास के साथ, आप जितनी जल्दी सोचेंगे, उससे कहीं जल्दी आप एनिमेशन में महारत हासिल कर लेंगे!