जेक्वेरी प्रभाव - 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" है

संभावित मान:

  • मिलीसेकंड (उदाहरण में 1500)
  • "slow"
  • "normal"
  • "fast"
easing

वैकल्पिक।विभिन्न एनीमेशन बिन्दुओं में एनीमेशन की गति निर्धारित करने वाले easing फ़ंक्शन

अंतर्निहित easing फ़ंक्शन:

  • स्विंग
  • लीनियर

अन्य एसिंग फ़ंक्शन प्रदान करने वाले एक्सटेंशन प्लगइन

callback

वैकल्पिक।animate फ़ंक्शन के बाद चलाने वाले फ़ंक्शन

कॉलबैक के बारे में अधिक जानने के लिए हमारे jQuery कॉलबैक इस चाप्तर

व्याकरण 2

$().animate(स्टाइल्स,विकल्प)
पारामीटर वर्णन
स्टाइल्स अनिवार्य।एनीमेशन के लिए उत्पन्न करने वाले CSS शैली और मान (इसी प्रकार) निर्धारित करता है
विकल्प

वैकल्पिक।एनीमेशन के अतिरिक्त विकल्प निर्धारित करता है

संभावित मान:

  • speed - एनीमेशन की गति निर्धारित करता है
  • easing - इसके लिए इस्तेमाल करने वाले easing फ़ंक्शन
  • callback - एनीमेशन पूरा होने के बाद चलाने वाले फ़ंक्शन
  • step - एनीमेशन के प्रत्येक कदम के बाद चलाने वाले फ़ंक्शन
  • queue - बूल वैल्यू।इसका अर्थ है कि क्या एफ़ीक्ट के क्वीयू में एनीमेशन को रखा जाए।यदि false है, तो एनीमेशन तुरंत शुरू होगी
  • specialEasing - इसमें से स्टाइल्स एक या अधिक CSS गुणों की मानकरेखा, और उनके समानांतर easing फ़ंक्शन