यह पोस्ट jQuery में छुपाएं() और फ़ेडआउट(), शो(), और फ़ेडइन() के बीच महत्वपूर्ण अंतर पर प्रकाश डालती है।
JQuery में छुपाएं() और फ़ेडआउट(), शो() और फ़ेडइन() के बीच अंतर पर आगे बढ़ने से पहले, पहले निम्नलिखित गाइड पढ़कर इन विधियों की मूल बातें देखें:
- jQuery की फ़ेडइन() विधि
- jQuery की फ़ेडआउट() विधि
- जावास्क्रिप्ट JQuery छिपाएँ() विधि | व्याख्या की
- JQuery शो() विधि | व्याख्या की
सबसे पहले, jQuery में छुपे() और फ़ेडआउट() तरीकों के बीच अंतर देखें।
jQuery में छुपाएं() और फ़ेडआउट() के बीच अंतर करें
'के बीच एकमात्र मुख्य अंतर' छिपाना() ' और ' फेड आउट() 'विधि है:
- समय अंतराल : ' छिपाना() डिफ़ॉल्ट रूप से विधि किसी भी समय अंतराल का उपभोग किए बिना तुरंत अपनी अपारदर्शिता को 100 से 0 में बदलकर तत्व को छिपा देती है, जबकि ' फेड आउट() ” विधि फीकी पड़ जाती है अर्थात तत्व को धीरे-धीरे “400ms” में छुपाएं जो कि इसका डिफ़ॉल्ट मान है।
आइए बताए गए अंतर का व्यावहारिक कार्यान्वयन देखें।
सबसे पहले निम्नलिखित HTML कोड को देखें:
< केंद्र >< h2 आईडी = 'H2' > Linuxhint में आपका स्वागत है ! एच 2 >
< बटन > तत्व छिपाएँ बटन >
केंद्र >
उपरोक्त कोड पंक्तियों में:
- “ <केंद्र> टैग वेब पेज के केंद्र में दिए गए तत्वों के संरेखण को समायोजित करता है।
- “ टैग एक आईडी 'H2' के साथ लेवल 2 उपशीर्षक बनाता है।
- “ <बटन> टैग एक नया बटन सम्मिलित करता है।
टिप्पणी: इस संपूर्ण मार्गदर्शिका में उपरोक्त HTML कोड का पालन किया जाता है।
उदाहरण: jQuery 'hide()' विधि को 'डिफ़ॉल्ट' मान के साथ लागू करना
यह उदाहरण किसी तत्व को छिपाने के लिए उसके डिफ़ॉल्ट मानों के साथ 'hide()' लागू करता है:
< लिखी हुई कहानी >$ ( दस्तावेज़ ) . तैयार ( समारोह ( ) {
$ ( 'बटन' ) . क्लिक ( समारोह ( ) {
$ ( '#H2' ) . छिपाना ( ) ;
} ) ;
} ) ;
लिखी हुई कहानी >
उपरोक्त कोड पंक्तियों में:
- सबसे पहले, ' तैयार() वर्तमान HTML दस्तावेज़ लोड होने पर निर्दिष्ट कार्यों को निष्पादित करने के लिए विधि लागू की जाती है।
- अगला, ' क्लिक करें() 'बटन क्लिक पर लिंक किए गए फ़ंक्शन को पूरा करने के लिए विधि जिम्मेदार है।
- उसके बाद, ' छिपाना() 'विधि एक्सेस किए गए शीर्षक तत्व को तुरंत छुपा देती है जिसकी आईडी 'H2' है।
उत्पादन
यह देखा जा सकता है कि बटन क्लिक करते ही शीर्षक तत्व तुरंत छिप जाता है।
उदाहरण: jQuery 'fadeOut()' विधि को 'डिफ़ॉल्ट' मान के साथ लागू करना
यह उदाहरण दिए गए तत्व को धीरे-धीरे '400ms' में छिपाने के लिए अपने डिफ़ॉल्ट मानों के साथ 'fadeOut()' विधि का उपयोग करता है।
इस परिदृश्य में 'बटन' तत्व की सामग्री बदल जाती है:
< बटन > फेड आउट ( छिपाना तत्व ) बटन >अब “fadeOut()” विधि को इस प्रकार कार्यान्वित करें:
< लिखी हुई कहानी >$ ( दस्तावेज़ ) . तैयार ( समारोह ( ) {
$ ( 'बटन' ) . क्लिक ( समारोह ( ) {
$ ( '#H2' ) . फेड आउट ( ) ;
} ) ;
} ) ;
लिखी हुई कहानी >
इस समय, ' फेड आउट() '' विधि को 400 एमएस यानी डिफ़ॉल्ट मान के साथ एक्सेस किए गए हेडिंग तत्व को फीका करने के लिए लागू किया जाता है।
उत्पादन
आउटपुट स्पष्ट रूप से दिखाता है कि दिया गया बटन क्लिक हेडिंग तत्व को डिफ़ॉल्ट समय अंतराल यानी '400ms' में धीरे-धीरे छुपाता है।
jQuery में शो() और फ़ेडइन() के बीच अंतर करें
'Hide()' और 'fadeOut()' विधियों के समान, वही अंतर 'show()' और 'fadeIn()' विधि के बीच है:
- समय अंतराल : ' दिखाओ() 'विधि डिफ़ॉल्ट रूप से छिपे हुए तत्व को तुरंत 0 से 100 तक बदलकर प्रदर्शित करती है, जबकि ' फीका होना() ” विधि छिपे हुए तत्व को धीरे-धीरे “400ms” में दिखाती है जो इसका डिफ़ॉल्ट मान है।
उदाहरण: 'डिफ़ॉल्ट' मान के साथ jQuery 'शो()' विधि लागू करना
यह उदाहरण छिपे हुए तत्व को प्रदर्शित करने के लिए 'शो ()' को उसके डिफ़ॉल्ट मानों के साथ लागू करता है।
सबसे पहले दिए गए HTML कोड ब्लॉक को देखें:
< केंद्र >< बटन > तत्व दिखाएँ बटन >
< h2 आईडी = 'H2' शैली = 'कुछ भी डिस्प्ले मत करो' > Linuxhint में आपका स्वागत है ! एच 2 >
केंद्र >
इस परिदृश्य के अनुसार, दिया गया शीर्षक तत्व 'की सहायता से छिपा हुआ है' कुछ भी डिस्प्ले मत करो ' संपत्ति।
अब, 'शो()' पद्धति के व्यावहारिक कार्यान्वयन को समझने के लिए दिए गए कोड ब्लॉक का पालन करें:
< लिखी हुई कहानी >$ ( दस्तावेज़ ) . तैयार ( समारोह ( ) {
$ ( 'बटन' ) . क्लिक ( समारोह ( ) {
$ ( '#H2' ) . दिखाओ ( ) ;
} ) ;
} ) ;
लिखी हुई कहानी >
उपरोक्त कोड ब्लॉक 'का उपयोग करता है दिखाओ() जोड़े गए छिपे हुए तत्व को तुरंत प्रदर्शित करने की विधि।
उत्पादन
यह देखा जा सकता है कि बटन क्लिक करने पर छिपा हुआ शीर्षक तत्व तुरंत दिखाई देता है।
उदाहरण: jQuery 'fadeIn()' विधि को 'डिफ़ॉल्ट' मान के साथ लागू करना
यह उदाहरण डिफ़ॉल्ट मान के साथ 'fadeIn()' विधि का उपयोग करके छिपे हुए तत्व को दिखाता है। 400 मि.से ”:
बटन तत्व का पाठ दिए गए परिदृश्य के अनुसार बदला गया है:
< बटन > फीका होना ( दिखाओ तत्व ) बटन >अब, 'लागू करें फीका होना() 'निम्नलिखित कोड ब्लॉक का उपयोग कर विधि:
< लिखी हुई कहानी >$ ( दस्तावेज़ ) . तैयार ( समारोह ( ) {
$ ( 'बटन' ) . क्लिक ( समारोह ( ) {
$ ( '#H2' ) . फीका होना ( ) ;
} ) ;
} ) ;
लिखी हुई कहानी >
इस कोड ब्लॉक में, ' फीका होना() 'विधि का उपयोग छिपे हुए तत्व को दिखाने के लिए किया जाता है जो आईडी 'H2' से 400ms यानी डिफ़ॉल्ट मान में मेल खाता है।
उत्पादन
यह देखा जा सकता है कि दिया गया बटन क्लिक छिपे हुए तत्व को डिफ़ॉल्ट समय अंतराल यानी '400ms' में धीरे-धीरे दिखाता है।
निष्कर्ष
JQuery में, के बीच एकमात्र महत्वपूर्ण अंतर है छिपाना() और फेड आउट() , दिखाओ() , और फीका होना() विधि है ' समय अंतराल ”। 'शो ()' और 'हाइड ()' विधि डिफ़ॉल्ट रूप से अपनी कार्यक्षमता तुरंत निष्पादित करती है, जबकि 'फेडइन ()', और 'फेडआउट ()' विधि डिफ़ॉल्ट समय अंतराल यानी '400ms' में अपना कार्य करती है। इस पोस्ट ने व्यावहारिक रूप से jQuery में छुपाएं() और फ़ेडआउट(), शो(), और फ़ेडइन() के बीच महत्वपूर्ण अंतर को समझाया।