Αυτή η ανάρτηση επισημαίνει τις βασικές διαφορές μεταξύ hide() και fadeOut(), show() και fadeIn() στο jQuery.
Πριν προχωρήσετε στη διαφορά μεταξύ hide() και fadeOut(), show() και fadeIn() στο jQuery, δείτε πρώτα τα βασικά αυτών των μεθόδων διαβάζοντας τους ακόλουθους οδηγούς:
- Μέθοδος fadeIn() του jQuery
- Μέθοδος fadeOut() jQuery
- Μέθοδος JavaScript JQuery Hide() | Εξήγησε
- Μέθοδος JQuery Show() | Εξήγησε
Αρχικά, δείτε τη διαφορά μεταξύ των μεθόδων hide() και fadeOut() στο jQuery.
Διαφοροποίηση μεταξύ hide() και fadeOut() στο jQuery
Η μία και μοναδική κύρια διαφορά μεταξύ των « κρύβω() ' και ' fadeOut() Η μέθοδος είναι:
- Χρονικό διάστημα : Ο ' κρύβω() Η μέθοδος ' από προεπιλογή αποκρύπτει το στοιχείο αλλάζοντας την αδιαφάνειά του από 100 σε 0 αμέσως χωρίς να καταναλώνει κανένα χρονικό διάστημα, ενώ το ' fadeOut() Η μέθοδος εξαφανίζεται, δηλαδή αποκρύπτετε το στοιχείο σταδιακά σε '400ms' που είναι η προεπιλεγμένη τιμή του.
Ας δούμε την πρακτική εφαρμογή της δηλωμένης διαφοράς.
Πρώτα κοιτάξτε τον ακόλουθο κώδικα HTML:
< κέντρο >< h2 id = 'H2' > Καλώς ήρθατε στο Linuxhint ! h2 >
< κουμπί > Απόκρυψη στοιχείου κουμπί >
κέντρο >
Στις παραπάνω γραμμές κώδικα:
- Ο ' <κέντρο> Η ετικέτα ρυθμίζει τη στοίχιση των δεδομένων στο κέντρο της ιστοσελίδας.
- Ο ' Η ετικέτα ' δημιουργεί μια υπότιτλου επιπέδου 2 με αναγνωριστικό 'H2'.
- Ο ' <κουμπί> Η ετικέτα ' εισάγει ένα νέο κουμπί.
Σημείωση: Ο παραπάνω κώδικας HTML ακολουθείται σε αυτόν τον οδηγό.
Παράδειγμα: Εφαρμογή της μεθόδου jQuery 'hide()' με τιμή 'Default'
Αυτό το παράδειγμα εφαρμόζει την 'hide()' με τις προεπιλεγμένες τιμές για την απόκρυψη ενός στοιχείου:
< γραφή >$ ( έγγραφο ) . έτοιμος ( λειτουργία ( ) {
$ ( 'κουμπί' ) . Κάντε κλικ ( λειτουργία ( ) {
$ ( '#H2' ) . κρύβω ( ) ;
} ) ;
} ) ;
γραφή >
Στις παραπάνω γραμμές κώδικα:
- Πρώτον, το « έτοιμος() Η μέθοδος ' εφαρμόζεται για την εκτέλεση των καθορισμένων συναρτήσεων όταν φορτώνεται το τρέχον έγγραφο HTML.
- Στη συνέχεια, το « Κάντε κλικ() Η μέθοδος ” είναι υπεύθυνη για την εκτέλεση της συνδεδεμένης λειτουργίας με το πάτημα του κουμπιού.
- Μετά από αυτό, το « κρύβω() Η μέθοδος ' αποκρύπτει αμέσως το στοιχείο επικεφαλίδας στο οποίο έχει προσπελαστεί, το αναγνωριστικό του οποίου είναι 'H2'.
Παραγωγή
Μπορεί να φανεί ότι το στοιχείο επικεφαλίδας κρύβεται αμέσως μετά το κλικ του κουμπιού.
Παράδειγμα: Εφαρμογή της μεθόδου jQuery “fadeOut()” με τιμή “Default”
Αυτό το παράδειγμα χρησιμοποιεί τη μέθοδο 'fadeOut()' με τις προεπιλεγμένες τιμές της για να αποκρύψει σταδιακά το δεδομένο στοιχείο στα '400ms'.
Σε αυτό το σενάριο το περιεχόμενο του στοιχείου 'κουμπί' αλλάζει:
< κουμπί > fadeOut ( Κρύβω Στοιχείο ) κουμπί >Τώρα εφαρμόστε τη μέθοδο 'fadeOut()' με αυτόν τον τρόπο:
< γραφή >$ ( έγγραφο ) . έτοιμος ( λειτουργία ( ) {
$ ( 'κουμπί' ) . Κάντε κλικ ( λειτουργία ( ) {
$ ( '#H2' ) . fadeOut ( ) ;
} ) ;
} ) ;
γραφή >
Αυτή τη στιγμή, το « fadeOut() Η μέθοδος ' εφαρμόζεται για να εξαφανιστεί το στοιχείο επικεφαλίδας στο οποίο έχει προσπελαστεί με 400ms, δηλαδή την προεπιλεγμένη τιμή.
Παραγωγή
Η έξοδος δείχνει ξεκάθαρα ότι το συγκεκριμένο κλικ του κουμπιού κρύβει το στοιχείο επικεφαλίδας σταδιακά στο προεπιλεγμένο χρονικό διάστημα, δηλαδή '400ms'.
Διαφοροποίηση μεταξύ show() και fadeIn() στο jQuery
Παρόμοια με τις μεθόδους 'hide()' και 'fadeOut()', η ίδια διαφορά είναι μεταξύ των μεθόδων 'show()' και 'fadeIn()':
- Χρονικό διάστημα : Ο ' προβολή() Η μέθοδος ' από προεπιλογή εμφανίζει το κρυφό στοιχείο αλλάζοντας αμέσως την αδιαφάνειά του από 0 σε 100, ενώ το ' ξεθωριάζω() Η μέθοδος δείχνει το κρυφό στοιχείο σταδιακά σε '400ms' που είναι η προεπιλεγμένη τιμή του.
Παράδειγμα: Εφαρμογή της μεθόδου jQuery 'show()' με τιμή 'Default'
Αυτό το παράδειγμα εφαρμόζει το 'show()' με τις προεπιλεγμένες τιμές του για να εμφανίσει το κρυφό στοιχείο.
Πρώτα κοιτάξτε το παρεχόμενο μπλοκ κώδικα HTML:
< κέντρο >< κουμπί > Εμφάνιση στοιχείου κουμπί >
< h2 id = 'H2' στυλ = 'display:none' > Καλώς ήρθατε στο Linuxhint ! h2 >
κέντρο >
Σύμφωνα με αυτό το σενάριο, το δεδομένο στοιχείο επικεφαλίδας κρύβεται με τη βοήθεια του ' οθόνη: καμία ” ιδιοκτησία.
Τώρα, ακολουθήστε το συγκεκριμένο μπλοκ κώδικα για να κατανοήσετε την πρακτική εφαρμογή της μεθόδου 'show()':
< γραφή >$ ( έγγραφο ) . έτοιμος ( λειτουργία ( ) {
$ ( 'κουμπί' ) . Κάντε κλικ ( λειτουργία ( ) {
$ ( '#H2' ) . προβολή ( ) ;
} ) ;
} ) ;
γραφή >
Το παραπάνω μπλοκ κώδικα χρησιμοποιεί το ' προβολή() ' μέθοδος για την άμεση εμφάνιση του προστιθέμενου κρυφού στοιχείου.
Παραγωγή
Μπορεί να φανεί ότι το κλικ στο κουμπί εμφανίζει αμέσως το κρυφό στοιχείο επικεφαλίδας.
Παράδειγμα: Εφαρμογή της μεθόδου jQuery “fadeIn()” με τιμή “Default”
Αυτό το παράδειγμα δείχνει το κρυφό στοιχείο χρησιμοποιώντας τη μέθοδο 'fadeIn()' με προεπιλεγμένη τιμή ' 400 ms ”:
Το κείμενο του στοιχείου κουμπιού αλλάζει σύμφωνα με το δεδομένο σενάριο:
< κουμπί > ξεθωριάζω ( προβολή Στοιχείο ) κουμπί >Τώρα, εφαρμόστε το ' ξεθωριάζω() μέθοδος ” χρησιμοποιώντας το ακόλουθο μπλοκ κώδικα:
< γραφή >$ ( έγγραφο ) . έτοιμος ( λειτουργία ( ) {
$ ( 'κουμπί' ) . Κάντε κλικ ( λειτουργία ( ) {
$ ( '#H2' ) . ξεθωριάζω ( ) ;
} ) ;
} ) ;
γραφή >
Σε αυτό το μπλοκ κώδικα, το ' ξεθωριάζω() Η μέθοδος χρησιμοποιείται για την εμφάνιση του κρυφού στοιχείου που αντιστοιχεί στο αναγνωριστικό 'H2' σε 400ms, δηλαδή την προεπιλεγμένη τιμή.
Παραγωγή
Μπορεί να παρατηρηθεί ότι το συγκεκριμένο κλικ στο κουμπί εμφανίζει το κρυφό στοιχείο σταδιακά στο προεπιλεγμένο χρονικό διάστημα, δηλαδή «400 ms».
συμπέρασμα
Στο jQuery, η μόνη βασική διαφορά μεταξύ του κρύβω() και fadeOut() , προβολή() , και ξεθωριάζω() μέθοδος είναι ' Χρονικό διάστημα '. Οι μέθοδοι 'show()' και 'hide()' εκτελούν τις λειτουργίες τους αμέσως από προεπιλογή, ενώ οι μέθοδοι 'fadeIn()' και 'fadeOut()' εκτελούν τις εργασίες τους στο προεπιλεγμένο χρονικό διάστημα, δηλαδή '400ms'. Αυτή η ανάρτηση εξήγησε πρακτικά τις βασικές διαφορές μεταξύ hide() και fadeOut(), show() και fadeIn() στο jQuery.