jQuery प्रभाव - एनिमेशन
JQuery के साथ, आप कस्टम एनिमेशन बना सकते हैं।
jQuery एनिमेशन - चेतन () विधि
कस्टम एनिमेशन बनाने के लिए jQuery animate()विधि का उपयोग किया जाता है।
वाक्य - विन्यास:
$(selector).animate({params},speed,callback);
आवश्यक पैराम्स पैरामीटर सीएसएस गुणों को एनिमेटेड होने के लिए परिभाषित करता है।
वैकल्पिक गति पैरामीटर प्रभाव की अवधि निर्दिष्ट करता है। यह निम्नलिखित मान ले सकता है: "धीमा", "तेज़", या मिलीसेकंड।
ऐनिमेशन पूरा होने के बाद वैकल्पिक कॉलबैक पैरामीटर एक फ़ंक्शन है जिसे निष्पादित किया जाना है।
animate()निम्न उदाहरण विधि का एक सरल उपयोग दर्शाता है ; यह एक <div> तत्व को दाईं ओर ले जाता है, जब तक कि यह 250px की बाईं संपत्ति तक नहीं पहुंच जाता:
उदाहरण
$("button").click(function(){
$("div").animate({left: '250px'});
});
डिफ़ॉल्ट रूप से, सभी HTML तत्वों की एक स्थिर स्थिति होती है, और उन्हें स्थानांतरित नहीं किया जा सकता है।
स्थिति में हेरफेर करने के लिए, पहले तत्व की सीएसएस स्थिति संपत्ति को सापेक्ष, निश्चित या निरपेक्ष पर सेट करना याद रखें!
jQuery एनिमेट () - एकाधिक गुणों में हेरफेर करें
ध्यान दें कि एक ही समय में कई गुण एनिमेटेड हो सकते हैं:
उदाहरण
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
क्या एनिमेट () विधि के साथ सभी सीएसएस गुणों में हेरफेर करना संभव है?
हाँ, लगभग! हालांकि, याद रखने वाली एक महत्वपूर्ण बात है: एनिमेट () विधि के साथ उपयोग किए जाने पर सभी संपत्ति के नाम ऊंट-आवरण वाले होने चाहिए: आपको पैडिंग-लेफ्ट के बजाय पैडिंग लेफ्ट, मार्जिन-राइट के बजाय मार्जिन राइट, और इसी तरह लिखना होगा।
इसके अलावा, रंग एनीमेशन कोर jQuery पुस्तकालय में शामिल नहीं है।
यदि आप रंग को एनिमेट करना चाहते हैं, तो आपको
jQuery.com से कलर एनिमेशन प्लगइन डाउनलोड करना होगा।
jQuery चेतन () - सापेक्ष मूल्यों का उपयोग करना
सापेक्ष मूल्यों को परिभाषित करना भी संभव है (मान तब तत्व के वर्तमान मूल्य के सापेक्ष होता है)। यह मान के आगे += या -= डालकर किया जाता है:
उदाहरण
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery चेतन () - पूर्व-निर्धारित मानों का उपयोग करना
आप किसी संपत्ति के एनिमेशन मान को " show", " hide", या " toggle" के रूप में भी निर्दिष्ट कर सकते हैं:
उदाहरण
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
jQuery चेतन () - कतार कार्यक्षमता का उपयोग करता है
डिफ़ॉल्ट रूप से, jQuery एनिमेशन के लिए कतार कार्यक्षमता के साथ आता है।
इसका मतलब यह है कि यदि आप एक के बाद एक कई कॉल लिखते हैं animate(), तो jQuery इन मेथड कॉल्स के साथ एक "आंतरिक" कतार बनाता है। फिर यह एक के बाद एक चेतन कॉल चलाता है।
इसलिए, यदि आप एक दूसरे के बाद अलग-अलग एनिमेशन करना चाहते हैं, तो हम कतार की कार्यक्षमता का लाभ उठाते हैं:
उदाहरण 1
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
नीचे दिया गया उदाहरण पहले <div>तत्व को दाईं ओर ले जाता है, और फिर टेक्स्ट के फ़ॉन्ट आकार को बढ़ाता है:
उदाहरण 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
jQuery व्यायाम
jQuery प्रभाव संदर्भ
सभी jQuery प्रभावों के पूर्ण अवलोकन के लिए, कृपया हमारे jQuery प्रभाव संदर्भ पर जाएं ।