jQuery प्रभाव
jQuery छुपा, दिखाए, टूट, स्लाइड और अनुकूलित एनीमेशन जैसे प्रभाव पैदा कर सकता है।
अपने आप प्रयास करें
इस jQuery प्रभाव को चारीये करें:
CodeW3C.com - अग्रणी Web तकनीक ट्यूटोरियल साइट
CodeW3C.com पर, आपको आपके लिए आवश्यक सभी वेबसाइट निर्माण ट्यूटोरियल ढूंढ सकते हैं。
यहाँ क्लिक करें
उदाहरण
- jQuery hide()
- सरल jQuery hide() फ़ंक्शन का प्रदर्शन करें।
- jQuery hide()
- एक और hide() प्रदर्शन। किस तरह एक हिस्सा टेक्स्ट को छुपाया जाए।
- jQuery slideToggle()
- सरल slide panel प्रभाव का प्रदर्शन करें।
- jQuery fadeTo()
- सरल jQuery fadeTo() फ़ंक्शन का प्रदर्शन करें।
- jQuery animate()
- सरल jQuery animate() फ़ंक्शन का प्रदर्शन करें।
jQuery छुपाना और दिखाना
hide() और show() दोनों फ़ंक्शनों के माध्यम से jQuery HTML एलीमेंट के छुपाने और दिखाने का समर्थन करता है:
उदाहरण
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
hide() और show() दोनों को दो वैकल्पिक पैरामीटर speed और callback सेट किया जा सकता है。
व्याकरण:
$(selector).hide(गति, कॉलबैक) $(selector).show(गति, कॉलबैक)
speed पैरामीटर दिखाए हुए या छुपे हुए की गति को निर्धारित करता है। ये वैल्यूज निर्धारित किए जा सकते हैं: "slow", "fast", "normal" या मिलीसेकंड।
callback पैरामीटर hide या show फ़ंक्शन पूरा होने के बाद चलाए जाने वाले फ़ंक्शन का नाम है। आप इस ट्यूटोरियल के नीचे के अनुभाग में इसके बारे में अधिक जानें callback पैरामीटर के ज्ञान
उदाहरण
$("button").click(function(){
$("p").hide(1000);
});
jQuery टचेट
jQuery toggle() फ़ंक्शन show() या hide() फ़ंक्शन का उपयोग करके HTML एलीमेंट के दिखाए हुए या छुपे हुए स्थिति को टचेट करता है।
दिखाए हुए एलीमेंट को छुपाएं, छुपे हुए एलीमेंट को दिखाएं।
व्याकरण:
$(selector).toggle(गति, कॉलबैक)
speed पैरामीटर इन वैल्यू को सेट कर सकता है: "slow", "fast", "normal" या मिलीसेकेंड。
उदाहरण
$("button").click(function(){
$("p").toggle();
});
callback पैरामीटर वह फ़ंक्शन नाम है जो इस फ़ंक्शन के बाद चलाया जाता है। आपको इस शिक्षा में नीचे अधिक जानकारी मिलेगी callback पैरामीटर के ज्ञान
jQuery स्लाइड फ़ंक्शन - slideDown, slideUp, slideToggle
jQuery ने निम्नलिखित स्लाइड फ़ंक्शन हैं:
$(selector).slideDown(गति, कॉलबैक) $(selector).slideUp(गति, कॉलबैक) $(selector).slideToggle(speed,callback)
speed पैरामीटर इन वैल्यू को सेट कर सकता है: "slow", "fast", "normal" या मिलीसेकेंड。
callback पैरामीटर वह फ़ंक्शन नाम है जो इस फ़ंक्शन के बाद चलाया जाता है। आपको इस शिक्षा में नीचे अधिक जानकारी मिलेगी callback पैरामीटर के ज्ञान
slideDown() उदाहरण
$(".flip").click(function(){
$(".panel").slideDown();
});
slideUp() उदाहरण
$(".flip").click(function(){
$(".panel").slideUp()
})
slideToggle() उदाहरण
$(".flip").click(function(){
$(".panel").slideToggle();
});
jQuery Fade फ़ंक्शन - fadeIn(), fadeOut(), fadeTo()
jQuery ने निम्नलिखित fade फ़ंक्शन दिए हैं:
$(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback)
speed पैरामीटर इन वैल्यू को सेट कर सकता है: "slow", "fast", "normal" या मिलीसेकेंड。
fadeTo() फ़ंक्शन में opacity पैरामीटर निर्धारित अनुप्रमाण अविरतता को परिभाषित करता है。
callback पैरामीटर वह फ़ंक्शन नाम है जो इस फ़ंक्शन के बाद चलाया जाता है। आपको इस शिक्षा में नीचे अधिक जानकारी मिलेगी callback पैरामीटर के ज्ञान
fadeTo() उदाहरण
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
fadeOut() उदाहरण
$("button").click(function(){
$("div").fadeOut(4000);
});
jQuery स्वयंक्रीय एनिमेशन
jQuery फ़ंक्शन को स्वयंक्रीय एनिमेशन के लिए वर्तनीकरण देता है:
$(selector).animate({params},[duration],[easing],[callback])
कीयां पैरामीटर है paramsयह एनिमेशन पैदा करने के लिए CSS पैरामीटर को परिभाषित करता है। एक साथ कई ऐसे पैरामीटर को सेट किया जा सकता है:
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
दूसरा पारामीटर है durationयह एक टाइम ड्यूरेशन को प्रयोग करने के लिए परिभाषित करता है। इसे सेट किया गया मान है: "slow", "fast", "normal" या मिलीसेकेंड。
उदाहरण 1
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
उदाहरण 2
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
HTML इलेमेंट डिफ़ॉल्ट में स्थिर स्थानांतरण हैं और गतिशील नहीं हैं
यदि आप इलेमेंट को गतिशील बनाना चाहते हैं, तो CSS के position को relative या absolute रखें
jQuery इफेक्ट - इस पृष्ठ से
| तत्व | वर्णन |
|---|---|
| $(selector).hide() | चयनित एलिमेंट को छुपाएं |
| $(selector).show() | चयनित एलिमेंट को दिखाएं |
| $(selector).toggle() | चयनित एलिमेंट को छुपाने और दिखाने के बीच टॉगल करें |
| $(selector).slideDown() | चयनित एलिमेंट को नीचे की ओर स्लाइड करके दिखाएं (दिखाएं) |
| $(selector).slideUp() | चयनित एलिमेंट को ऊपर की ओर स्लाइड करके छुपाएं (छुपाएं) |
| $(selector).slideToggle() | चयनित एलिमेंट पर ऊपर की ओर और नीचे की ओर स्लाइड करें |
| $(selector).fadeIn() | चयनित एलिमेंट को फेड इन करें |
| $(selector).fadeOut() | चयनित एलिमेंट को फेड आउट करें |
| $(selector).fadeTo() | चयनित एलिमेंट को दिया गया अवरोधकता में फेड आउट करें |
| $(selector).animate() | चयनित एलिमेंट पर कस्टम एनिमेशन करें |
पूर्ण संदर्भ पुस्तिका के लिए हमारे jQuery इफेक्ट संदर्भ पुस्तिका。
