jQuery
jQuery। अंतरंग () विधि

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

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

पैरामीटर

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

कभी-कभी हमें शब्दों की स्थिति को एक स्थान से दूसरे स्थान पर बदलने या शब्दों के आकार को कम करने और शब्दों का रंग बदलने के लिए स्वचालित रूप से हमारी वेबसाइट या वेब एप्लिकेशन के आकर्षण में सुधार करने की आवश्यकता होती है। 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>");
     }
  });