jQuery में animate विधि

पिछले पाठों में हमने जिन सभी विधियों का अध्ययन किया, वे कुछ सीमित हैं - वे वही करती हैं जिसके लिए उन्हें बनाया गया है। यदि आपको एनीमेशन पर अधिक नियंत्रण की आवश्यकता है - सार्वभौमिक विधि animate का उपयोग करें।

यह विधि अपने पहले पैरामीटर के रूप में एक ऑब्जेक्ट स्वीकार करती है, जिसमें आप उन CSS गुणों के नए मान निर्दिष्ट करते हैं जिन्हें आप एनिमेट करना चाहते हैं। और दूसरे पैरामीटर के रूप में - एनीमेशन के निष्पादन का समय।

आइए निम्नलिखित HTML कोड पर इस विधि को लागू करें:

html<button id="button">click me</button>
<div id="elem">text...</div>

मान लें कि CSS इस तरह दिखता है:

css#elem {
  width: 150px;
  height: 150px;
  padding: 10px;
  border: 1px solid green;
}

आइए ऐसा करें कि बटन पर क्लिक करने पर तत्व निम्न आकारों में सिकुड़ जाए: ऊंचाई - 50px, चौड़ाई - 100px:

javascript$('#button').click(function() {
  $('#elem').animate({height: 50, width: 100}, 1000);
});

यदि मान इस प्रारूप में निर्दिष्ट किया जाता है height: '+=50', तो एनीमेशन इस तरह काम करेगा: वर्तमान ऊंचाई मान में 50px (हमारे मामले में) जोड़ा जाएगा और तत्व नए मान तक धीरे-धीरे एनिमेट हो जाएगा। आइए एक उदाहरण देखें:

javascript$('#button').click(function() {
  $('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

animate विधि के बारे में अधिक जानकारी के लिए jQuery संदर्भ देखें।

html<body>
  <div id="block"></div>
</body>

cssdiv {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  cursor: pointer;
  margin-bottom: 20px;
}