खोज…


वाक्य - विन्यास

  1. (चयनकर्ता) .animate ({शैलियों} {विकल्पों})

पैरामीटर

पैरामीटर विवरण
गुण सीएसएस गुणों और मूल्यों की एक वस्तु जो एनीमेशन की ओर बढ़ेगी
अवधि (डिफ़ॉल्ट: 400) एक स्ट्रिंग या संख्या यह निर्धारित करती है कि एनीमेशन कब तक चलेगा
आसान (डिफ़ॉल्ट: स्विंग) एक स्ट्रिंग जो संकेत करती है कि संक्रमण के लिए किस आसान फ़ंक्शन का उपयोग करना है
पूर्ण एक बार एनीमेशन पूरा होने पर कॉल करने के लिए एक फ़ंक्शन, जिसे एक बार प्रति मिलान तत्व कहा जाता है।
शुरू एनीमेशन शुरू होने पर एक कार्य निष्पादित करने के लिए निर्दिष्ट करता है।
कदम एनीमेशन में प्रत्येक चरण के लिए एक फ़ंक्शन को निष्पादित करने के लिए निर्दिष्ट करता है।
पंक्ति बूलियन मान निर्दिष्ट करता है कि एनिमेशन को प्रभाव कतार में रखना है या नहीं।
प्रगति एनीमेशन में प्रत्येक चरण के बाद निष्पादित होने वाले फ़ंक्शन को निर्दिष्ट करता है।
किया हुआ एनीमेशन समाप्त होने पर एक फ़ंक्शन निष्पादित करने के लिए निर्दिष्ट करता है।
विफल यदि एनीमेशन पूरा करने में विफल रहता है तो एक फ़ंक्शन निष्पादित किया जाता है।
specialEasing शैलियों पैरामीटर से एक या एक से अधिक सीएसएस संपत्तियों का नक्शा, और उनके संबंधित आसान कार्य।
हमेशा एक फ़ंक्शन निर्दिष्ट करता है जिसे एनीमेशन को पूरा किए बिना रोक दिया जाता है।

कॉलबैक के साथ एनीमेशन

कभी-कभी हमें शब्दों की स्थिति को एक स्थान से दूसरे स्थान पर बदलने या शब्दों के आकार को कम करने और शब्दों का रंग बदलने के लिए स्वचालित रूप से हमारी वेबसाइट या वेब एप्लिकेशन के आकर्षण में सुधार करने की आवश्यकता होती है। JQuery इस अवधारणा के साथ fadeIn(), hide(), slideDown() का उपयोग करके बहुत मदद करता है लेकिन इसकी कार्यक्षमता सीमित है और इसने केवल उस विशिष्ट कार्य को किया है जो इसे असाइन करता है।

Jquery इस समस्या को .animate() नामक एक अद्भुत और लचीली विधि प्रदान करके ठीक करता है। यह विधि कस्टम एनिमेशन सेट करने की अनुमति देती है जो सीएसएस गुणों का उपयोग किया जाता है जो सीमाओं पर उड़ान भरने की अनुमति देता है। उदाहरण के लिए यदि हम सीएसएस शैली को width:200; रूप में संपत्ति देते हैं width:200; और DOM तत्व की वर्तमान स्थिति 50 है, चेतन विधि दिए गए css मान से वर्तमान स्थिति मान को कम करती है और उस तत्व को 150 पर चेतन करती है। लेकिन हमें इस भाग के बारे में परेशान होने की आवश्यकता नहीं है क्योंकि एनीमेशन इंजन इसे संभाल लेगा।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $("#btn1").click(function(){
        $("#box").animate({width: "200px"});
    });
</script>

<button id="btn1">Animate Width</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>

सीएसएस शैली गुणों की सूची जो .animate() विधि की अनुमति देती है।

backgroundPositionX, backgroundPositionY, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderSpacing, margin, marginBottom, marginLeft, marginRight, marginTop, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, height, width, maxHeight, maxWidth, minHeight, minWidth, fontSize, bottom, left, right, top, letterSpacing,  wordSpacing, lineHeight, textIndent, 

.animate() विधि में निर्दिष्ट गति।

milliseconds (Ex: 100, 1000, 5000, etc.), 
"slow", 
"fast"

.animate() विधि में निर्दिष्ट आसान।

"स्विंग"
"रैखिक"

यहां जटिल एनीमेशन विकल्पों के साथ कुछ उदाहरण दिए गए हैं।

उदाहरण 1:

$( "#book" ).animate({
  width: [ "toggle", "swing" ],
  height: [ "toggle", "swing" ],
  opacity: "toggle"
 }, 5000, "linear", function() {
    $( this ).after( "<div>Animation complete.</div>" );
});

उदाहरण 2:

  $("#box").animate({
     height: "300px",
     width: "300px"
     }, {
     duration: 5000,
     easing: "linear",
     complete: function(){
        $(this).after("<p>Animation is complete!</p>");
     }
  });


Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow