jQuery में animate विधि
पिछले पाठों में हमने जिन सभी विधियों का अध्ययन किया, वे कुछ सीमित हैं - वे वही करती हैं जिसके लिए उन्हें बनाया गया है। यदि आपको एनीमेशन पर अधिक नियंत्रण की आवश्यकता है - सार्वभौमिक विधि animate का उपयोग करें।
यह विधि अपने पहले पैरामीटर के रूप में एक ऑब्जेक्ट स्वीकार करती है, जिसमें आप उन CSS गुणों के नए मान निर्दिष्ट करते हैं जिन्हें आप एनिमेट करना चाहते हैं। और दूसरे पैरामीटर के रूप में - एनीमेशन के निष्पादन का समय।
आइए निम्नलिखित HTML कोड पर इस विधि को लागू करें:
<button id="button">click me</button>
<div id="elem">text...</div>
मान लें कि CSS इस तरह दिखता है:
#elem {
width: 150px;
height: 150px;
padding: 10px;
border: 1px solid green;
}
आइए ऐसा करें कि बटन पर क्लिक करने पर तत्व निम्न आकारों में सिकुड़ जाए:
ऊंचाई - 50px, चौड़ाई - 100px:
$('#button').click(function() {
$('#elem').animate({height: 50, width: 100}, 1000);
});
यदि मान इस प्रारूप में निर्दिष्ट किया जाता है
height: '+=50', तो एनीमेशन इस तरह काम करेगा:
वर्तमान ऊंचाई मान में 50px (हमारे मामले में) जोड़ा जाएगा और तत्व नए मान तक धीरे-धीरे एनिमेट हो जाएगा। आइए एक उदाहरण देखें:
$('#button').click(function() {
$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});
animate विधि के बारे में अधिक जानकारी के लिए jQuery संदर्भ देखें।
इस प्रकार का मार्कअप है:
<body>
<div id="block"></div>
</body>
div {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
margin-bottom: 20px;
}
ऐसा करें कि #block वाले div पर क्लिक करने पर उसकी चौड़ाई 1100ms में 200px तक बढ़ जाए।
पहले कार्य से मार्कअप का उपयोग करें। ऐसा करें कि #block वाले div पर हर बार क्लिक करने पर उसकी चौड़ाई 200px बढ़ जाए और ऐसा हर बार 900px में हो।
पहले कार्य से मार्कअप का उपयोग करें। ऐसा करें कि #block वाले div पर हर बार क्लिक करने पर उसकी चौड़ाई और ऊंचाई 100px बढ़ जाए और ऐसा हर बार 950px में हो।
पहले कार्य से मार्कअप का उपयोग करें। ऐसा करें कि #block वाले div पर हर बार क्लिक करने पर, वह 100px दाईं ओर खिसक जाए और ऐसा हर बार 700px में हो।
