JQuery जावास्क्रिप्ट में लिखा गया है। प्रत्येक व्यक्ति जो छोटे से जानता है, मुझे आश्चर्य है कि उन्होंने इसमें से कुछ कैसे लिखा है। आप शुद्ध जावास्क्रिप्ट में HTML तत्वों को कैसे एनिमेट करते हैं? क्या यह बार-बार सीएसएस प्रॉपर्टी को अपडेट कर रहा है जिसे मानक डीओएम मैनिपुलेशन का उपयोग करके एनिमेटेड किया जाना है, कॉलबैक को एसिंक्रोनस बनाने के लिए? या यह कुछ और परिष्कृत है?JQuery एनिमेशन कैसे करता है?
jQuery एनीमेशन केवल आवर्ती टाइमर पर सीएसएस गुण अपडेट कर रहे हैं (जो इसे असीमित बनाता है)।
वे एक ट्विनिंग एल्गोरिदम भी लागू करते हैं जो एनीमेशन शेड्यूल से पहले या शेड्यूल के पीछे है या नहीं और वे आवश्यकतानुसार पकड़ने या धीमा करने के लिए प्रत्येक चरण में एनीमेशन में चरण आकार समायोजित करते हैं। यह एनीमेशन को उस समय निर्दिष्ट करने की अनुमति देता है जब तक कि होस्ट कंप्यूटर कितनी तेज़ न हो। नकारात्मकता यह है कि धीमी या व्यस्त कंप्यूटर अधिक चंचल एनिमेशन दिखाएंगे।
वे एनीमेशन कार्यों को भी समर्थन देते हैं जो एनीमेशन के त्वरण के समय/आकार को नियंत्रित करते हैं। Linear का मतलब निरंतर गति है। Swing एक और अधिक सामान्य है, धीमी गति से शुरू करें, बीच में अधिकतम गति में तेजी लाने के लिए और फिर धीरे-धीरे समाप्त करें।
क्योंकि एनिमेशन एसिंक्रोनस हैं, jQuery भी एनीमेशन कतार लागू करता है ताकि आप एकाधिक एनिमेशन निर्दिष्ट कर सकें जिन्हें आप दूसरे के बाद निष्पादित करना चाहते हैं। दूसरी एनीमेशन तब शुरू होती है जब पहली एनीमेशन खत्म हो जाती है और इसी तरह। jQuery एक पूर्णता समारोह भी प्रदान करता है ताकि यदि आप एनीमेशन पूर्ण होने पर अपना कुछ कोड चलाने के लिए चाहते हैं, तो आप एक कॉलबैक फ़ंक्शन निर्दिष्ट कर सकते हैं जिसे एनीमेशन पूर्ण होने पर कॉल किया जाएगा। एनीमेशन पूर्ण होने पर आपको कुछ ऑपरेशन करने की इजाजत मिलती है जैसे किसी अन्य ऑब्जेक्ट की एनीमेशन शुरू करना, ऑब्जेक्ट छुपाएं, आदि ...
एफवाईआई, jQuery javascript source code यदि आप अधिक जानकारी चाहते हैं तो पूरी तरह से उपलब्ध है। काम का मूल doAnimation() नामक स्थानीय फ़ंक्शन में है, हालांकि अधिकांश काम step और update नामक कार्यों में किया जाता है जो jQuery.fx.prototype की परिभाषा के साथ मिल सकते हैं।
एक jQuery एनीमेशन के दौरान तत्व का निरीक्षण करते समय लगभग हमेशा आपके सीएसएस कोड को बदलता है, जिसे jQuery के माध्यम से तत्व को असाइन किया जाता है जिसे वास्तव में आपके द्वारा लिखे गए HTML से असाइन नहीं किया जाता है। फ़ायरफ़ॉक्स प्राप्त करें यदि आपके पास फ़ायरफ़ॉक्स के लिए नहीं है और एनीमेशन निष्पादित करते समय क्या हो रहा है इसका निरीक्षण करें।
कोड को स्वयं पढ़े बिना, मैं समझता हूं कि यह वास्तव में मानक अंतराल ("टिक") पर डोम तत्वों और सीएसएस शैलियों को अद्यतन करने के लिए मानक जावास्क्रिप्ट विधियों और गुणों का उपयोग कर रहा है, जो इसे मानक setInterval() और setTimeout() विधियों का उपयोग करके पूरा करता है ।
यह है: एक सादा पुराना सेट अंतराल और कुछ डोम हेरफेर।
बेशक, कोड उससे थोड़ा अधिक जटिल है।
देखें: http://code.jquery.com/jquery-latest.js, फ़ाइल के अंत के पास। JQuery.fx.prototype के लिए खोजें।
आपको एहसास है कि आप किसी भी Jquery.js फ़ाइल को खोल सकते हैं और अपने आप को सही देख सकते हैं? यहां पूरी तरह से आधिकारिक स्रोत कोड है: https://github.com/jquery/jquery/tree/master/src – asawyer
[खुद को क्यों न देखें?] (Http://code.jquery.com/jquery- 1.7.2.जेएस) –
@asawyer हाँ, लेकिन स्रोत तकनीकी स्पष्टीकरण की सेवा नहीं करता है। यह दिखाता है कि यह कैसे नीचे है, ऐसा क्यों नहीं किया जाता है और सिद्धांत में ऐसा कुछ कैसे काम करता है। –