jQuery चेतन () विधि
उदाहरण
"चेतन" एक तत्व, इसकी ऊंचाई बदलकर:
$("button").click(function(){
$("#box").animate({height: "300px"});
});
परिभाषा और उपयोग
एनिमेट () विधि सीएसएस गुणों के एक सेट का एक कस्टम एनीमेशन करती है।
यह विधि सीएसएस शैलियों के साथ एक तत्व को एक राज्य से दूसरे राज्य में बदलती है। एनिमेटेड प्रभाव बनाने के लिए CSS गुण मान को धीरे-धीरे बदला जाता है।
केवल संख्यात्मक मान एनिमेटेड हो सकते हैं (जैसे "मार्जिन: 30px")। स्ट्रिंग मान एनिमेटेड नहीं हो सकते (जैसे "पृष्ठभूमि-रंग: लाल"), स्ट्रिंग्स "शो", "छिपाने" और "टॉगल" को छोड़कर। ये मान एनिमेटेड तत्व को छिपाने और दिखाने की अनुमति देते हैं।
युक्ति: सापेक्ष एनिमेशन के लिए "+=" या "-=" का उपयोग करें।
वाक्य - विन्यास
(selector).animate({styles},speed,easing,callback)
Parameter | Description |
---|---|
styles | Required. Specifies one or more CSS properties/values to animate. Note: The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on. Properties that can be animated: Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element. |
speed | Optional. Specifies the speed of the animation. Default value is 400 milliseconds Possible values:
|
easing | Optional. Specifies the speed of the element in different points of the animation. Default value is "swing". Possible values:
|
callback | Optional. A function to be executed after the animation completes. To learn more about callback, please read our jQuery Callback chapter |
वैकल्पिक सिंटैक्स
(selector).animate({styles},{options})
Parameter | Description |
---|---|
styles | Required. Specifies one or more CSS properties/values to animate (See possible values above) |
options | Optional. Specifies additional options for the animation. Possible values:
|
इसे स्वयं आज़माएं - उदाहरण
का उपयोग करना एनीमेशन को दोहराने वाले कॉलबैक फ़ंक्शन के साथ एनिमेट () का उपयोग कैसे करें।
एकाधिक एनीमेशन शैलियों और विकल्पों को निर्दिष्ट करने के लिए वैकल्पिक सिंटैक्स का उपयोग करना।
के लिए चेतन () विधि का उपयोग कैसे करें।
में स्मूथ स्क्रॉलिंग जोड़ें लिंक में स्मूथ स्क्रॉलिंग जोड़ने के लिए एनिमेट () का उपयोग कैसे करें।