animate मेथड

animate मेथड विभिन्न CSS प्रॉपर्टीज के लिए एनिमेशन इफेक्ट्स बनाने की अनुमति देता है। एकमात्र अनिवार्य पैरामीटर - CSS प्रॉपर्टीज के साथ एक ऑब्जेक्ट, जैसा कि हम css मेथड में पास करते हैं। कई प्रॉपर्टीज, जिनमें गैर-संख्यात्मक मान या कई मान होते हैं, उन्हें jQuery की बेसिक फंक्शनैलिटी द्वारा एनिमेट नहीं किया जा सकता है (उदाहरण के लिए background-color)। इसके अलावा CSS प्रॉपर्टीज के संक्षिप्त नाम हमेशा सपोर्टेड नहीं होते हैं, उदाहरण के लिए font - इसके बजाय fontSize या font-size का उपयोग करने की आवश्यकता है। मानों से पहले '+=' या '-=' लगाया जा सकता है, ऐसे में बाद में निर्दिष्ट मान को वर्तमान प्रॉपर्टी मान में जोड़ा या घटाया जाएगा। संख्यात्मक मानों के बजाय show, hide या toggle भी लगाया जा सकता है। सभी jQuery इफेक्ट्स, जिनमें animate शामिल है, को ग्लोबली डिसेबल किया जा सकता है, सेटिंग jQuery.fx.off = true का उपयोग करके, जो अवधि के मान को 0 पर सेट करती है।

सिंटैक्स

एनिमेशन का पहला पैरामीटर CSS प्रॉपर्टीज के साथ एक ऑब्जेक्ट है और कुंजी: मान फॉर्मेट में उनके मान, जिन्हें हम एनिमेट करने जा रहे हैं। शेष पैरामीटर्स को वैकल्पिक माना जाता है। दूसरा पैरामीटर - एनिमेशन की अवधि को मिलीसेकंड में निर्धारित करता है, डिफॉल्ट रूप से 400ms होती है। तीसरा पैरामीटर ट्रांजिशन के लिए ईजिंग फंक्शन (डिफॉल्ट रूप से swing है), और चौथा - कॉलबैक फंक्शन, जो एनिमेशन पूरा होने के बाद निष्पादित होगा:

javascript.animate(प्रॉपर्टीज, [अवधि ], [ईजिंग फंक्शन ], [कॉलबैक फंक्शन ]);

समय न केवल मिलीसेकंड में निर्धारित किया जा सकता है, बल्कि कीवर्ड slow (600ms) और fast (200ms) से भी, जितना अधिक मान, उतनी धीमी एनिमेशन। विभिन्न विकल्पों को ऑब्जेक्ट के रूप में, जावास्क्रिप्ट ऑब्जेक्ट के रूप में पास किया जा सकता है, जिसमें कुंजी: मान जोड़े होते हैं:

javascript.animate(प्रॉपर्टीज, विकल्प);

उदाहरण के लिए, आइए CSS प्रॉपर्टीज width और height के लिए मान toggle सेट करें। अवधि 5000ms पर, ईजिंग फंक्शन को ऑब्जेक्ट के रूप में पास करेंगे, चौड़ाई के लिए यह लीनियर फंक्शन होगा, और ऊंचाई के लिए - easeOutBounce, साथ ही एनिमेशन पूरा होने पर हमारा फंक्शन एक बार निष्पादित होगा (complete कुंजी देखें), जो #test वाले एलिमेंट के बाद 'Animation complete.' लेबल वाला एक डिव रखेगा:

javascript$('#test').animate({
  width: 'toggle',
  height: 'toggle'
}, {
  duration: 5000,
  specialEasing: {
    width: 'linear',
    height: 'easeOutBounce'
  },
  complete: function() {
    $(this).after('<div>Animation complete.</div>');
  }
});

नीचे दी गई तालिका में options ऑब्जेक्ट के गुण और विधियाँ और उनका विवरण दिया गया है:

नाम	विवरण
`duration`	मिलीसेकंड में एनिमेशन की अवधि - स्ट्रिंग या संख्या। डिफॉल्ट रूप से `400ms`।
`easing`	निर्धारित करता है कि किस ईजिंग फंक्शन का उपयोग करना है। डिफॉल्ट रूप से `swing`।
`queue`	बूलियन मान या स्ट्रिंग। डिफॉल्ट रूप से `true`। इंगित करता है - एनिमेशन को कतार में रखना है या नहीं। `false` मान पर एनिमेशन तुरंत शुरू हो जाएगा। यदि पैरामीटर स्ट्रिंग के रूप में पास किया जाता है, तो एनिमेशन इस पैरामीटर द्वारा दर्शाई गई कतार में रखा जाएगा। कस्टम नाम वाली कतार का उपयोग करते समय, एनिमेशन स्वचालित रूप से नहीं शुरू होगा, इसे शुरू करने के लिए - `dequeue('queuename')` का उपयोग करें।
`specialEasing`	यहां आप एक ऑब्जेक्ट पास कर सकते हैं, जिसमें कुंजियाँ CSS प्रॉपर्टीज होंगी, और मान - संबंधित ईजिंग फंक्शन।
`step`	एक फंक्शन, जो प्रत्येक एनिमेटेड एलिमेंट की प्रत्येक एनिमेटेड प्रॉपर्टी के लिए कॉल की जाती है। यह `Tween` ऑब्जेक्ट को संशोधित करने की अनुमति देती है ताकि मान सेट होने से पहले प्रॉपर्टी के मान को बदला जा सके। पैरामीटर्स के रूप में वर्तमान `tween` मान और `Tween` ऑब्जेक्ट स्वीकार करता है।
`progress`	एक फंक्शन, जो एनिमेशन के प्रत्येक चरण के बाद कॉल की जाती है, प्रत्येक एलिमेंट के लिए केवल एक बार, एनिमेटेड प्रॉपर्टीज की संख्या के बावजूद। फंक्शन तीन पैरामीटर्स स्वीकार करता है `animation` (प्रॉमिस के रूप में), `progress` (`0` से `1` तक की संख्या) और `remainingMs` (शेष मिलीसेकंड की संख्या)।
`complete`	एक फंक्शन, जो एलिमेंट की एनिमेशन समाप्त होने के बाद एक बार कॉल की जाती है। फंक्शन `animation` (प्रॉमिस के रूप में) स्वीकार करता है।
`start`	एक फंक्शन, जो कॉल की जाती है, जब एलिमेंट की एनिमेशन शुरू होती है। फंक्शन `animation` (प्रॉमिस के रूप में) और `jumpedToEnd` (बूलियन मान। यदि `true`, तो एनिमेशन स्वचालित रूप से समाप्त हो जाती है) स्वीकार करता है।
`done`	एक फंक्शन, जो कॉल की जाती है, जब एलिमेंट की एनिमेशन समाप्त होती है (इसका प्रॉमिस सफलतापूर्वक पूरा हुआ)। फंक्शन `animation` (प्रॉमिस के रूप में) और `jumpedToEnd` (बूलियन मान। यदि `true`, तो एनिमेशन स्वचालित रूप से समाप्त हो जाती है) स्वीकार करता है।
`fail`	एक फंक्शन, जो कॉल की जाती है, जब एलिमेंट की एनिमेशन त्रुटि के साथ समाप्त होती है (इसका प्रॉमिस त्रुटि के साथ पूरा हुआ)। फंक्शन `animation` (प्रॉमिस के रूप में) और `jumpedToEnd` (बूलियन मान। यदि `true`, तो एनिमेशन स्वचालित रूप से समाप्त हो जाती है) स्वीकार करता है।
`always`	एक फंक्शन, जो कॉल की जाती है, जब एलिमेंट की एनिमेशन समाप्त हो जाती है या बिना पूरा हुए रुक जाती है (इसका प्रॉमिस सफलतापूर्वक या त्रुटि के साथ पूरा हुआ)। फंक्शन `animation` (प्रॉमिस के रूप में) और `jumpedToEnd` (बूलियन मान। यदि `true`, तो एनिमेशन स्वचालित रूप से समाप्त हो जाती है) स्वीकार करता है।

उदाहरण

आइए #left बटन पर क्लिक करने पर, हरे वर्ग को बाईं ओर शिफ्ट करें, और #right बटन पर दाईं ओर 50px पर शिफ्ट करें, साथ ही अवधि 600ms पर सेट करें - slow कमांड के साथ:

html<button id="left">left</button>
<button id="right">right</button>
<div class="block"></div>

cssdiv {
  position: absolute;
  background-color: green;
  left: 50px;
  width: 100px;
  height: 100px;
  margin: 5px;
}

javascript$('#right').click(function() {
  $('.block').animate({'left': '+=50px'}, 'slow');
});
  
$('#left').click(function() {
  $('.block').animate({'left': '-=50px'}, 'slow');
});

यह भी देखें

show मेथड,
जो एलिमेंट्स को धीरे-धीरे दिखाता है
stop मेथड,
जो चल रही एनिमेशन को रोकने की अनुमति देता है
delay मेथड,
जो इवेंट्स के निष्पादन में देरी सेट करता है
jQuery.fx.off प्रॉपर्टी,
जो एनिमेशन को ग्लोबली डिसेबल करने की अनुमति देती है
animated सेलेक्टर,
जो उन एलिमेंट्स को चुनता है, जो वर्तमान समय एनिमेशन में शामिल हैं