Smooth.js - $ .animate को डाउनग्रेड के साथ CSS3 के बदलाव के लिए jQuery प्लगइन

CSS3 संक्रमण एक बहुत उपयोगी चीज है। जावास्क्रिप्ट एनीमेशन की तुलना में, वे हैं:

1. चिकनी संक्रमण प्रदान करें;
2. कम संसाधनों का उपभोग करें;
3. नए अवसरों को खोलें। उदाहरण के लिए, मैट्रिक्स परिवर्तनों (सीएसएस-ट्रांसफॉर्म) का स्वचालित प्रसंस्करण;

बेशक, हमारे प्यारे IE संस्करण 9 में भी उनका समर्थन नहीं करते हैं।

IE के मामले में, पारंपरिक तरीके से एनीमेशन करना तर्कसंगत होगा, उदाहरण के लिए, $ .animate के माध्यम से। मैं ऐसे मामलों में Smooth.js प्लगइन का उपयोग करने का सुझाव देता हूं, जो आपके लिए करेंगे।

वाक्य-विन्यास

वाक्य रचना अत्यंत सरल है और जितना संभव हो उतना करीब है jQuery.animate:

$("#subject).smooth({ width: "40px", transform: "rotate(-45deg)", background: "#cbf" }, { duration: 2000, easing: "swing" }); 

पहला पैरामीटर एनीमेशन के लिए गुणों की एक सूची है, दूसरा एनीमेशन सेटिंग्स है। अब तक की सेटिंग्स में, केवल अवधि (एमएस में अवधि) और सहजता (स्मूथिंग फ़ंक्शन का नाम)।

अनुक्रमिक एनीमेशन

यह फ़ंक्शन $ .Deferred () ऑब्जेक्ट लौटाता है, ताकि आप अनुक्रम में कई एनिमेशन आसानी से कर सकें:

 $("#subject).smooth({ width: "40px" }).done(function() { $("#subject).smooth({ transform: "rotate(-45deg)", )); 

ऑपरेटिंग मोड

प्लगइन दो मोड में से एक में काम कर सकता है - "css" और "jquery।" जब इनिशियलाइज़ किया जाता है, तो यह मोड को css में सेट करने की कोशिश करता है, यानी "jquery" का उपयोग करने के मामले में, मोड को किसी भी समय मैन्युअल रूप से सेट किया जा सकता है।

  $.fn.smooth.configure({ mode: "jquery" }); 

निष्कर्ष

आप यहां पारगमन के बारे में अधिक पढ़ सकते हैं ।
मैं प्लगइन प्रतिक्रिया के लिए आभारी रहूंगा।