यदि आप पहली बार jQuery के साथ कई साल पहले dabbled, यह एनीमेशन करने की क्षमता हो सकती है। यह शायद jQuery के पहले बड़े ड्रॉ में से एक था। इन दिनों, सीएसएस एनीमेशन के साथ-साथ काफी सभ्य ब्राउज़र समर्थन कर सकता है और यह अधिक प्रदर्शन करने वाला है, इसलिए यह कम प्रासंगिक है। हालाँकि, यदि आपको सुपर डीप ब्राउज़र सपोर्ट की आवश्यकता है, तो jQuery अभी भी एक विकल्प है।
हमने पहले से ही कवर किया है कि CSS को jQuery में कैसे बदला जाए। यह इस तरह दिख रहा है:
$("#element").css(( "background-color": "red", "left": "20px" ));उस तत्व को तुरन्त उन मूल्यों में बदलने के बजाय, हम उन्हें चेतन कर सकते हैं। यह लगभग समान दिखता है:
$("#element").animate(( "background-color": "red", "left": "20px" ));यहां हमने वीडियो में बनाया पेन:
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन e111fbfa7506d19034d977b17e2160a3 देखें
यदि हम ब्राउज़रों के उपकरणों में उस तत्व का निरीक्षण करते हैं, तो हम इस एनीमेशन के तहत देख सकते हैं कि jQuery कैसे एनीमेशन कर रहा है। अनिवार्य रूप से, यह तेजी से इनलाइन स्टाइल को उस तत्वों पर लागू करता है
इस वीडियो में हम कुछ jQuery कोड में खुदाई करते हैं जो किसी और ने यह देखने के लिए लिखा था कि हम इसे कितनी अच्छी तरह से विच्छेदित कर सकते हैं।
पेन jQuery के चेतन की ऊँचाई देखें: कोडपेन पर जोश परेट्ट (@JTParrett) द्वारा ऑटो
उस यात्रा के दौरान, हम ऑटो हाइट्स के लिए दिलचस्प छोटी यात्रा पर जाते हैं। यह कुछ ऐसा है जो न तो सीएसएस या जावास्क्रिप्ट विशेष रूप से अच्छा कर सकता है। वे कठिन संख्या पसंद करते हैं। 10px से 200px के लिए चेतन समझ में आता है। "आप जो भी सामान्य रूप से होगा" के लिए 10px चेतन करें उतना आसान नहीं है।
जोश के कोड में, हम एक चतुर फ़ंक्शन पाते हैं जो अनिवार्य रूप से ऑटो को ऊंचाई निर्धारित करता है, इसे मापता है, इसे वापस सेट करता है कि यह क्या था, फिर उस नए परीक्षण किए गए मूल्य को एनिमेट करता है। बहुत साफ सुथरी चाल! एक अधिक मजबूत डेमो के लिए जो आगे और पीछे कच्चे जावास्क्रिप्ट में जाता है, यहां देखें।
वीडियो समाप्त होने के बाद तक मैंने नोटिस नहीं किया, लेकिन jQuery वास्तव में इसके साथ हमारी मदद करता है। फ़ाइल जिस कारण jQuery # 40985 का उपयोग करना है। उपयोग करना .slideUp/ .slideDown/ .slideToggle- यह सिर्फ किसी तरह काम करता है, भले ही तत्व display: noneशुरू करने के लिए छिपा हो ।
पेन jQuery के चेतन की ऊँचाई देखें: CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा ऑटो
पुराने IE में हमारे काम का परीक्षण करने के लिए, हमने BrowserStack का उपयोग किया, जो कोडपेन में भी एकीकृत है।