जेक्वेरी प्रभाव - animate() विधि
उदाहरण
"div" एलिमेंट की ऊंचाई को बदलें:
$(".btn1").click(function(){ $("#box").animate({height:"300px"}); });
वर्णन और उपयोग
animate() विधि एससीएस गुण सेट के कस्टम एनिमेशन का निर्वाह करती है。
यह विधि एससीएस शैली के माध्यम से एलिमेंट को एक रूप से दूसरे रूप में बदलता है। एससीएस गुण मूल्यों को धीरे-धीरे बदला जाता है, इस तरह एनिमेशन इफेक्ट बनाया जा सकता है。
केवल नंबर मूल्यों को एनिमेशन बनाया जा सकता है (जैसे "margin:30px")। शब्द मूल्यों को एनिमेशन नहीं बनाया जा सकता (जैसे "background-color:red")।
टिप्पणी:अपेक्षाकृत एनिमेशन (relative animations) बनाने के लिए "+=" या "-=" का उपयोग करें。
व्याकरण 1
$().animate(स्टाइल्स,speed,easing,callback)
पारामीटर | वर्णन |
---|---|
स्टाइल्स |
आवश्यक है। एनिमेशन इफेक्ट करने वाले एससीएस शैली और मूल्य को निर्धारित करता है。 संभव एससीएस शैली मूल्य (उदाहरण दें):
टिप्पणी:CSS शैली DOM नाम (उदाहरण में "fontSize") के द्वारा सेट की जाती है, न कि CSS नाम (उदाहरण में "font-size") |
speed |
वैकल्पिक।एनीमेशन की गति निर्धारित करता है।मूलभूत "normal" है संभावित मान:
|
easing |
वैकल्पिक।विभिन्न एनीमेशन बिन्दुओं में एनीमेशन की गति निर्धारित करने वाले easing फ़ंक्शन अंतर्निहित easing फ़ंक्शन:
अन्य एसिंग फ़ंक्शन प्रदान करने वाले एक्सटेंशन प्लगइन |
callback |
वैकल्पिक।animate फ़ंक्शन के बाद चलाने वाले फ़ंक्शन कॉलबैक के बारे में अधिक जानने के लिए हमारे jQuery कॉलबैक इस चाप्तर |
व्याकरण 2
$().animate(स्टाइल्स,विकल्प)
पारामीटर | वर्णन |
---|---|
स्टाइल्स | अनिवार्य।एनीमेशन के लिए उत्पन्न करने वाले CSS शैली और मान (इसी प्रकार) निर्धारित करता है |
विकल्प |
वैकल्पिक।एनीमेशन के अतिरिक्त विकल्प निर्धारित करता है संभावित मान:
|