Αυτή η ανάρτηση θα εξηγήσει την πρακτική εφαρμογή της μεθόδου fadeOut() του jQuery για τη δημιουργία ενός ομαλού εφέ fade-out.
Πώς να δημιουργήσετε ομαλά εφέ Fade-Out χρησιμοποιώντας τη μέθοδο fadeOut() του jQuery;
jQuery's ' fadeOut() Η μέθοδος ” κρύβει το επιλεγμένο στοιχείο σταδιακά μειώνοντας την αδιαφάνειά του. Αυτή η μέθοδος αλλάζει την κατάσταση του επιλεγμένου στοιχείου από ορατό σε κρυφό. Το κρυφό στοιχείο δεν εμφανίζεται στην ιστοσελίδα έως ότου ο χρήστης το εμφανίσει ξανά χρησιμοποιώντας το « ξεθωριάζω() 'μέθοδος.
Σύνταξη
$ ( εκλέκτορας ) . fadeOut ( ταχύτητα, διευκόλυνση, επανάκληση ) ;
Η παραπάνω σύνταξη υποστηρίζει τις ακόλουθες προαιρετικές παραμέτρους για την προσαρμογή του εφέ εξασθένισης:
- Ταχύτητα: Καθορίζει την ταχύτητα του φαινομένου εξασθένισης σε χιλιοστά του δευτερολέπτου. Από προεπιλογή η τιμή του είναι '400ms'. Επιπλέον, υποστηρίζει επίσης δύο ενσωματωμένες τιμές 'slow' και 'fast'.
- χαλάρωση: Δείχνει την ταχύτητα κίνησης που ξεθωριάζει σε διαφορετικά σημεία. Από προεπιλογή η τιμή του είναι 'swing (πιο αργή στην αρχή/τέλος και αργή στη μέση)'. Επιπλέον, λειτουργεί επίσης στο 'γραμμικό (σταθερή ταχύτητα στο fading animation)'.
- επανάκληση: Ορίζει μια συνάρτηση που καθορίζεται από το χρήστη που εκτελείται μετά την ολοκλήρωση της κίνησης που ξεθωριάζει για να εκτελέσει την καθορισμένη εργασία.
Ας χρησιμοποιήσουμε πρακτικά την μέθοδο που ορίζεται παραπάνω.
Κώδικας HTML
Πριν προχωρήσετε στη μέθοδο 'fadeOut()', δείτε τον ακόλουθο κώδικα HTML που δημιουργεί ένα δείγμα στοιχείου 'div' στο οποίο θα εκτελεστεί το εφέ fade-out:
< κουμπί > fadeOut ( Κρύβω Στοιχείο ) κουμπί >< br >< br >< div id = 'myDiv' στυλ = 'Ύψος: 80 εικονοστοιχεία; πλάτος: 300 εικονοστοιχεία; περίγραμμα: 2 εικονοστοιχεία συμπαγές μαύρο; περιθώριο: αυτόματη; στοίχιση κειμένου: στο κέντρο' >
< h2 > Καλώς ήρθατε στο Linuxhint h2 >
div >
Στις παραπάνω γραμμές κώδικα:
- Ο ' <κουμπί> Η ετικέτα προσθέτει ένα στοιχείο κουμπιού.
- Ο ' Η ετικέτα ' δημιουργεί ένα στοιχείο div με αναγνωριστικό 'myDiv' και διαμορφώνεται με τη βοήθεια των ακόλουθων ιδιοτήτων στυλ (ύψος, πλάτος, περίγραμμα, περιθώριο, στοίχιση κειμένου).
- Μέσα στο div, το ' Η ετικέτα προσδιορίζει το πρώτο στοιχείο υποτίτλου του επιπέδου 2.
Τώρα, ξεκινήστε με το πρώτο παράδειγμα.
Παράδειγμα 1: Δημιουργία εφέ ομαλής εξασθένισης με προεπιλεγμένη τιμή fadeOut()
Το πρώτο παράδειγμα αποκρύπτει το αντιστοιχισμένο στοιχείο div χρησιμοποιώντας τη μέθοδο 'fadeOut()' με την προεπιλεγμένη τιμή '400ms':
< γραφή >
$ ( έγγραφο ) . έτοιμος ( λειτουργία ( ) {
$ ( 'κουμπί' ) . Κάντε κλικ ( λειτουργία ( ) {
$ ( '#myDiv' ) . fadeOut ( ) ;
} ) ;
} ) ;
γραφή >Στις παραπάνω γραμμές κώδικα:
- Πρώτον, το « έτοιμος() Η μέθοδος ” εκτελεί τις δεδομένες συναρτήσεις όταν φορτώνεται το τρέχον έγγραφο HTML/DOM.
- Στη συνέχεια, το « Κάντε κλικ() Η μέθοδος εκτελεί τη συνδεδεμένη λειτουργία με το πάτημα του κουμπιού όταν πατηθεί ο σχετικός επιλογέας «κουμπιού».
- Μετά από αυτό, το « fadeOut() Η μέθοδος αποκρύπτει το στοιχείο div στο οποίο έχει προσπελαστεί το αναγνωριστικό του οποίου είναι 'myDiv' σε 400ms, δηλαδή την προεπιλεγμένη τιμή.
Παραγωγή
Παρατηρείται ότι το συγκεκριμένο κλικ στο κουμπί εξαφανίζει το στοιχείο div σταδιακά σε '400ms'.
Παράδειγμα 2: Δημιουργήστε ομαλά εφέ Fade-Out με την παράμετρο fadeOut() “speed”
Αυτό το παράδειγμα χρησιμοποιεί τη μέθοδο 'fadeOut()' με τις ενσωματωμένες τιμές (slow/fast) της παραμέτρου 'speed':
< γραφή >
$ ( έγγραφο ) . έτοιμος ( λειτουργία ( ) {
$ ( 'κουμπί' ) . Κάντε κλικ ( λειτουργία ( ) {
$ ( '#myDiv' ) . fadeOut ( 'αργός' ) ;
} ) ;
} ) ;
γραφή >Τώρα το ' fadeOut() 'η μέθοδος περνάει το ' αργός Η τιμή ” ως παράμετρός της για την ομαλή δημιουργία του εφέ εξασθενισμού, δηλαδή αλλάζει την κατάσταση του επιλεγμένου στοιχείου div από ορατό σε κρυφό.
Παραγωγή
Μπορεί να φανεί ότι το επιλεγμένο στοιχείο div κρύβεται αργά στο κλικ του κουμπιού.
Παράδειγμα 3: Δημιουργία εφέ ομαλής εξασθένισης με την παράμετρο fadeOut() 'duration'
Αυτό το παράδειγμα εφαρμόζει τη μέθοδο 'fadeOut()' με συγκεκριμένο αριθμό χιλιοστών του δευτερολέπτου ως παράμετρο διάρκειάς της:
< γραφή >
$ ( έγγραφο ) . έτοιμος ( λειτουργία ( ) {
$ ( 'κουμπί' ) . Κάντε κλικ ( λειτουργία ( ) {
$ ( '#myDiv' ) . fadeOut ( 6000 ) ;
} ) ;
} ) ;
γραφή >Τώρα, η μέθοδος 'fadeOut()' χρησιμοποιεί τον καθορισμένο αριθμό χιλιοστών του δευτερολέπτου για να κρύψει το αντίστοιχο στοιχείο στη δεδομένη χρονική διάρκεια.
Παραγωγή
Η παραπάνω έξοδος κρύβει τις δεδομένες αλλαγές του στοιχείου div με ένα κλικ σε ένα δεδομένο χρονικό διάστημα.
Παράδειγμα 4: Δημιουργήστε ομαλά εφέ Fade-Out με τη συνάρτηση 'callback' fadeOut()
Αυτό το παράδειγμα εκτελεί μια συνάρτηση επανάκλησης μετά την ολοκλήρωση του εφέ fade-out μέσω της μεθόδου 'fadeOut()':
< γραφή >
$ ( έγγραφο ) . έτοιμος ( λειτουργία ( ) {
$ ( 'κουμπί' ) . Κάντε κλικ ( λειτουργία ( ) {
$ ( '#myDiv' ) . fadeOut ( 4000 , λειτουργία ( ) {
κονσόλα. κούτσουρο ( 'Το στοιχείο div απόκρυψε με επιτυχία!' )
} ) ;
} ) ;
} ) ;
γραφή >Στο αναφερόμενο μπλοκ κώδικα:
- Ο ' fadeOut() Η μέθοδος εξαφανίζει το αντιστοιχισμένο στοιχείο div σε συγκεκριμένο αριθμό χιλιοστών του δευτερολέπτου και, στη συνέχεια, εκτελεί την παρεχόμενη συνάρτηση επανάκλησης.
- Μεσα στην ' επανάκληση 'λειτουργία, η ' console.log() Η μέθοδος ' εφαρμόζεται για την εμφάνιση της καθορισμένης δήλωσης μετά την ολοκλήρωση του εφέ 'fade-out'.
Παραγωγή
Φαίνεται ότι η 'κονσόλα' εμφανίζει μια δήλωση που ορίζεται στη συνάρτηση επανάκλησης μετά την απόκρυψη του δεδομένου στοιχείου div.
Παράδειγμα 5: Δημιουργήστε ομαλά εφέ Fade-Out με την παράμετρο 'easing' fadeOut()
Αυτό το παράδειγμα εφαρμόζει τη μέθοδο 'fadeOut()' με τις πιθανές τιμές της παραμέτρου 'easing':
< γραφή >
$ ( έγγραφο ) . έτοιμος ( λειτουργία ( ) {
$ ( 'κουμπί' ) . Κάντε κλικ ( λειτουργία ( ) {
$ ( '#myDiv' ) . fadeOut ( 4000 , 'γραμμικός' ) ;
} ) ;
} ) ;
γραφή >Τώρα το ' fadeOut() Η μέθοδος ' εκτελεί το φαινόμενο fade out σε συγκεκριμένο αριθμό χιλιοστών του δευτερολέπτου με σταθερή ταχύτητα λόγω του ' γραμμικός ' αξία.
Παραγωγή
Η έξοδος αλλάζει τη δεδομένη κατάσταση στοιχείου από ορατή σε κρυφή με σταθερή ταχύτητα. Αυτό είναι για την εφαρμογή του εφέ 'fade-out' στο στοιχείο.
συμπέρασμα
Για να δημιουργήσετε ένα ομαλό εφέ εξασθένισης χρησιμοποιώντας το jQuery's ' fadeOut() », ο χρήστης δεν απαιτεί καμία πρόσθετη παράμετρο. Αυτή η μέθοδος εξασθενεί, δηλαδή κρύβει το στοιχείο σταδιακά αλλάζοντας την αδιαφάνειά του. Εάν ο χρήστης χρειάζεται να εκτελέσει ένα εφέ εξασθένισης σε συγκεκριμένο αριθμό χιλιοστών του δευτερολέπτου, εκτελέστε μια συνάρτηση επανάκλησης και στη συνέχεια χρησιμοποιήστε τις παραμέτρους 'speed', 'easing' και 'callback' με τη μέθοδο 'fadeOut()'. Αυτή η ανάρτηση πρακτικά εξηγούσε τη μέθοδο fadeOut() του jQuery για τη δημιουργία ενός ομαλού εφέ fade-out.