जक्वेरी प्रभाव - एनीमेशन

jQuery animate() मथड़ी आपको अक्षरित एनिमेशन को बनाने की अनुमति देता है。

इफ़ेक्ट डिमो



jQuery

jQuery एनिमेशन - animate() मथड़ी

jQuery animate() मथड़ी का उपयोग करके अक्षरित एनिमेशन को बनाने के लिए किया जाता है。

व्याकरण:

$(चयनकर्ता).animate({params},speed,callback);

अनिवार्य params पैरामीट एनिमेशन के लिए बनाने वाले CSS गुण को निर्धारित करता है。

वैकल्पिक speed पैरामीट इफ़ेक्ट की अवधि को निर्धारित करता है। यह निम्नलिखित मानों में से ले सकता है: "slow"、"fast" या मिलीसेकंड।

वैकल्पिक callback पैरामीट एनिमेशन पूरा होने के बाद चलाने वाले फ़ंक्शन का नाम है。

नीचे दिए गए उदाहरण में animate() मथड़ी के सरल उपयोग को दिखाया गया है; यह <div> एलिमेंट को बाईं ओर जब तक left गुण 250 पिक्सल होने तक ले जाता है:

उदाहरण

$("button").click(function(){
  $("div").animate({left:'250px'});
});

स्वयं प्रयोग करें

सूचना:डिफ़ॉल्ट में, सभी HTML एलिमेंटों के पास एक स्थिर स्थान होता है और वे गतिशील नहीं होते。

यदि स्थान को संचालित करना है, तो सबसे पहले एलिमेंट के CSS position गुण को relative, fixed या absolute रखना चाहिए!

jQuery animate() - कई गुणों को संचालित करना

ध्यान दें कि एनिमेशन के निर्माण के दौरान कई गुणों को साथ मिलाकर उपयोग किया जा सकता है:

उदाहरण

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

स्वयं प्रयोग करें

सूचना:क्या animate() मथड़ी के द्वारा सभी CSS गुणों को काम कर सकता है?

हाँ, लगभग सच! लेकिन, एक महत्वपूर्ण चीज याद रखनी चाहिए: animate() का उपयोग करते समय, सभी गुणांकों को कैमल स्टाइल में लिखना चाहिए, जैसे, पैडिंग-लेफ्ट के बजाय पैडिंग, मार्गिन-राइट के बजाय मार्गिन-राइट, इत्यादि।

साथ ही, रंग एनिमेशन को jQuery के कोर कॉर्पस में शामिल नहीं किया गया है।

अगर आप रंग एनिमेशन बनाना चाहते हैं, तो आपको jQuery.com से Color Animations प्लगइन डाउनलोड करना होगा.

jQuery animate() - सापेक्षिक मान का उपयोग करना

आप यहाँ तक कि अभिव्यक्ति को सापेक्षिक मान (यह मौजूदा एलीमेंट के लिए इसके अर्थ है) के रूप में भी परिभाषित कर सकते हैं. इसके लिए मान के सामने += या -= लगाना होगा:

उदाहरण

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

स्वयं प्रयोग करें

jQuery animate() - पूर्व-निर्धारित मान का उपयोग करना

आप यहाँ तक कि गुण के एनिमेशन मान को "show"、"hide" या "toggle" के रूप में भी सेट कर सकते हैं:

उदाहरण

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

स्वयं प्रयोग करें

jQuery animate() - क्वीयू फ़ंक्शन का उपयोग करना

डिफ़ॉल्ट में, jQuery एनिमेशन के लिए क्वीयू फ़ंक्शन प्रदान करता है.

इसका अर्थ है कि अगर आप एक दूसरे के बाद कई animate() कॉल करते हैं, तो jQuery इन तमाम कॉल को शामिल करने वाला 'अंतर्गत' क्वीयू बनाएगा. फिर इन एनिमेशन कॉल को एक-एक करके चलाया जाएगा.

उदाहरण 1

छुपाएं, अगर आप विभिन्न एनिमेशन के बाद अलग-अलग एनिमेशन करना चाहते हैं, तो हमें क्वीयू फ़ंक्शन का उपयोग करना होगा:

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

स्वयं प्रयोग करें

उदाहरण 2

नीचे का उदाहरण <div> एलीमेंट को दायाँ तरफ ले जाता है, फिर टेक्स्ट के आकार को बढ़ाता है:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

स्वयं प्रयोग करें