इससे पहले, 2007 में, हमने jQuery का कलर प्लगइन जारी किया था, और तब से यह आपको कलर एनीमेशन क्षमताओं के साथ प्रदान करता है। अब हम इस प्लगइन का दूसरा संस्करण तैयार कर रहे हैं, जिसमें एपीआई, आरजीबीए, एचएसएलए और कई अन्य विशेषताएं शामिल होंगी। बीटा टाइम आ गया है ! इस प्लगइन का भंडार github.com/jquery/jquery-color पर स्थित है। और code.jquery.com पर प्लगइन के दो संस्करण भी उपलब्ध हैं - एक minifier के साथ असम्पीडित और संपीड़ित ।

नई सुविधाओं का अवलोकन

RGBA

अब हम रंग मूल्यों के लिए RGBA प्रारूप का समर्थन करते हैं। उन ब्राउज़रों में जो RGBA का समर्थन नहीं करते हैं, तत्व के निकटतम बैकग्राउंडरेल मूल्य का उपयोग मध्यवर्ती रंग सन्निकटन की गणना करने के लिए किया जाएगा। यद्यपि यह "सत्य" अल्फा पारदर्शिता नहीं है, यह विधि कम से कम अल्फा की एक भ्रम प्रदान करेगा जब एक सादे पृष्ठभूमि के साथ बातचीत। यहाँ ओपेरा 10, क्रोम 10, फ़ायरफ़ॉक्स 3.6 और IE 6 ऐसे दिखते हैं जब वे उस डेमो अल्फा ओवरले को चलाते हैं:

HSLA

अब हम अल्फा के अपवाद के साथ सभी ब्राउज़रों में HSLA रंग मूल्यों के संकेत का भी समर्थन करते हैं, जिसके समर्थन में हम उपरोक्त तकनीकों को लागू करते हैं।

उपयोगकर्ता के अनुकूल एपीआई

निजी उपयोगिता विधियों के एक सरल समूह के बजाय, $ .Color () कॉल का उपयोग किया जाता है , जो एक नया रंग ऑब्जेक्ट बनाता है। एक नए रंग ऑब्जेक्ट को कई अलग-अलग तरीकों से शुरू किया जा सकता है: एक रंग का नाम, एक हेक्साडेसिमल रंग कोड, एक सीएसएस-जैसे आरजीबीए या एचएसएलए मूल्य, आरजीबीए मानों की एक सरणी , या एक रंग घटक के साथ एक वस्तु। अब रंग घटकों में से प्रत्येक के लिए सहायक विधियाँ हैं, जैसे .red () और .hue () , जो आपको इसके मूल्य को पढ़ने या सेट करने की अनुमति देती हैं। सहायक कार्यों (जैसे .toRgbString () , .transition (), और .is () ) के साथ संयुक्त , $ .Color वस्तु अब आपके सभी रंग जरूरतों को पूरा करने में सक्षम है। सभी नई सुविधाओं के अवलोकन के लिए github.com/jquery/jquery-color पर README देखें। अब jQuery.Color केवल सरल रंगों को एनिमेट करने के लिए उपयुक्त नहीं है: अब आप इसके API का उपयोग जटिल रंग गणना और एनिमेशन के लिए कर सकते हैं!

तत्काल उदाहरण:

//   Color  : var red = $.Color( 'rgba(255,0,0,1)' ); //  CSS- //    Color    : var orange = $.Color( '#FF0000' ).green( 153 ); //       : var between = $.Color([ 255, 0, 0 ]).transition( "blue", 0.5 ); 

आंशिक रंग एनीमेशन

हमने केवल एक या दो रंग घटकों को निर्दिष्ट करने की क्षमता जोड़ी, ताकि आप आंशिक रूप से रंग को चेतन कर सकें ( यहां एक उदाहरण है ):

 //       elem.animate({ backgroundColor: $.Color({ saturation: 0 }) }, 1000); 

त्रुटि संदेश, नई सुविधाओं के लिए सुझाव

यदि आप नए रंग प्लगइन के साथ किसी भी समस्या की रिपोर्ट करना चाहते हैं, या यदि आप एक नई सुविधा प्रदान करना चाहते हैं, तो github से संपर्क करें ।

हम सभी को नए $ .कोलर बीटा के कुछ उत्कृष्ट उदाहरण देखना और दिखाना भी चाहेंगे , इसलिए कृपया उन्हें टिप्पणियों में हमारे साथ साझा करें।