Jquery ομαλή αλλαγή διαφάνειας. Αλλαγή διαφάνειας JQuery. Προστέθηκε στην έκδοση jQuery
Το animation στις σύγχρονες ιστοσελίδες έχει γίνει εδώ και καιρό κάτι δεδομένο. Η διάλυση στοιχείων, τα αναδυόμενα μηνύματα, οι συρόμενες γκαλερί εικόνων βελτιώνουν την εμπειρία χρήστη και αυξάνουν την απόδοση του ιστότοπου. Στη δημοφιλή βιβλιοθήκη javascript jQuery, η fadeIn() είναι μία από τις βασικές λειτουργίες κινούμενων εικόνων. Ελέγχει τη διαφάνεια των μπλοκ.
Εξασθένιση εφέΗ μέθοδος fadeIn() διασφαλίζει ότι η διαφάνεια του στοιχείου που μεταβιβάζεται σε αυτό αλλάζει στο 100%. Στη βιβλιοθήκη jQuery, συνδυάζεται με τη συνάρτηση fadeOut(), με την οποία μπορείτε να επαναφέρετε τη διαφάνεια και έτσι να "διαλύσετε" το στοιχείο.
Ένα παρόμοιο αποτέλεσμα μπορεί να επιτευχθεί χρησιμοποιώντας τη μέθοδο fadeTo(), της οποίας το εύρος επιρροής είναι ακόμη μεγαλύτερο. Η FadeTo() μπορεί να ορίσει οποιαδήποτε τιμή διαφάνειας μεταξύ 0 και 1.
Σύνταξη μεθόδουΗ μέθοδος fadeIn() του jQuery καλείται στο πλαίσιο του στοιχείου του οποίου η διαφάνεια πρέπει να αλλάξει. Μπορεί να πάρει από μηδέν έως τρεις παραμέτρους:
Element.fadeIn(); element.fadeIn(duration); element.fadeIn(διάρκεια, επανάκληση); element.fadeIn(duration, easing, callback); element.fadeIn(config);
Το όρισμα duration καθορίζει το χρόνο κατά τον οποίο θα εμφανιστεί η κίνηση. Αυτός μπορεί να είναι ένας αριθμός που υποδεικνύει τον αριθμό των χιλιοστών του δευτερολέπτου ή μία από τις λέξεις-κλειδιά:
- "γρήγορο" (200ms);
- "αργή" (600ms);
Εάν η διάρκεια δεν έχει οριστεί, θα είναι προεπιλεγμένη στα 400 χιλιοστά του δευτερολέπτου.
Η παράμετρος επανάκλησης υποδηλώνει μια συνάρτηση που θα κληθεί αμέσως μετά την ολοκλήρωση της κινούμενης εικόνας. Η λειτουργία επανάκλησης δεν δέχεται καμία παράμετρο. Αυτή η μεταβλητή μέσα σε αυτήν αναφέρεται στον κόμβο DOM που τροποποιείται.
Το όρισμα easing ελέγχει τη λειτουργία χρονισμού της κινούμενης εικόνας, δηλαδή την ταχύτητά της ανάλογα με το χρόνο. Με τη βοήθειά του, μπορείτε να επιταχύνετε την αρχή και να επιβραδύνετε το τέλος του κινούμενου σχεδίου ή να το κάνετε ομοιόμορφο σε όλη τη διάρκεια. Η τιμή του ορίσματος είναι μια συμβολοσειρά που περιέχει τη λέξη-κλειδί, με προεπιλογή τη συνάρτηση "swing".
Η ακόλουθη fadeIn() θα αυξήσει σταδιακά την αδιαφάνεια του στοιχείου με την κλάση .block για ένα δευτερόλεπτο και μετά θα εκτυπώσει ένα μήνυμα στην κονσόλα:
$(".block").fadeIn(1000, linear, function() ( console.log("Η κίνηση ολοκληρώθηκε"); ));
Εάν οι αναφερόμενες παράμετροι δεν είναι αρκετές, μπορείτε να μεταβιβάσετε τη μέθοδο σε ένα αντικείμενο διαμόρφωσης, το οποίο μπορεί να περιέχει έως και 11 διαφορετικές ρυθμίσεις.
Λειτουργίες επανάκλησηςΗ παράμετρος επανάκλησης που μεταβιβάστηκε στη μέθοδο jQuery fadeIn() είναι μια πολύ χρήσιμη επιλογή επειδή η αλλαγή της ιδιότητας γίνεται ασύγχρονα, χωρίς να εμποδίζεται η συνολική ροή κώδικα.
Const callback = function() ( console.log("Animation ολοκληρωμένη"); ); $(".στοιχείο").fadeIn(1000); επανάκληση();
Σε αυτό το παράδειγμα, η συνάρτηση θα εκτελεστεί αμέσως μετά την έναρξη της κινούμενης εικόνας, χωρίς να περιμένει να εμφανιστεί πλήρως το στοιχείο.
Για να λειτουργήσουν όλα όπως προβλέπεται, θα πρέπει να χρησιμοποιήσετε ένα όρισμα επανάκλησης για να πιάσετε το τέλος της κινούμενης εικόνας:
Const callback = function() ( console.log("Animation ολοκληρωμένη"); ); $(".element").fadeIn(1000, επιστροφή κλήσης);
Τώρα ένα μήνυμα θα εκτυπωθεί στην κονσόλα μόνο όταν το στοιχείο γίνει πλήρως ορατό.
Πλήρης διαφάνεια και απόκρυψη στοιχείουΌπως γνωρίζετε, μια μηδενική τιμή της ιδιότητας αδιαφάνειας δεν αφαιρεί το στοιχείο από τη σελίδα, αλλά το κάνει μόνο αόρατο. Αυτή η συμπεριφορά δεν είναι κατάλληλη αν θέλουμε να κρύψουμε κάποιο μπλοκ.
Επομένως, οι μέθοδοι fade της βιβλιοθήκης jQuery fadeIn(), fadeTo() και fadeOut() λειτουργούν με διαφάνεια σε συνδυασμό με την ιδιότητα εμφάνισης. Ένα πλήρως διαφανές στοιχείο κρύβεται χρησιμοποιώντας την οθόνη: Κανένας κανόνας και πριν εμφανιστεί, αυτός ο κανόνας ακυρώνεται.
Και πάλι, χαιρετισμούς αγαπητοί αναγνώστες του ιστολογίου. Σήμερα θέλω να σας πω πώς να κάνετε ομαλή διαφάνεια οποιουδήποτε στοιχείου στον ιστότοπο χρησιμοποιώντας το JQuery. Τι σημαίνει για οποιοδήποτε στοιχείο; Αυτό σημαίνει ότι μπορείτε να εφαρμόσετε αυτήν τη διαφάνεια σε οποιεσδήποτε εικόνες, μετρητές και ετικέτες στον ιστότοπο. Όλα αυτά απλά θα διακοσμήσουν τον πόρο σας. Τέλος πάντων, ας ξεκινήσουμε.
Να σας θυμίσω ότι το megaweb.su μοιράστηκε το σενάριο μαζί μας, για το οποίο τον ευχαριστούμε πολύ.
ΓραφήΤο πρώτο πράγμα που πρέπει να κάνετε είναι να συνδέσετε τη βιβλιοθήκη jQuery, με την έννοια ενός σεναρίου, το οποίο πρέπει να βάλετε παρακάτω ανάμεσα στις ετικέτες Και .
Στη συνέχεια, ακριβώς εκεί πριν από την ετικέτα πρέπει να αντιγράψετε και να επικολλήσετε το ακόλουθο σενάριο jQuery:
; $(document).ready(function())( $(".megaweb").each(function())( $(this).animate((opacity:"0.3"),1); $(this). mouseover( function())($(this).stop().animate((opacity:"1.0"),600); ) $(this).mouseout(function())($(this).stop ().ζωντανή ((αδιαφάνεια:"0.3"));
Αντιγράφηκε; Συγχαρητήρια, έχετε κάνει ήδη το μεγαλύτερο μέρος της δουλειάς :-)
Ρύθμιση του σεναρίουΜπορείτε να προσαρμόσετε πλήρως αυτό το σενάριο στα γούστα σας.
- $('.megaweb') είναι το όνομα της κλάσης που θα εφαρμοστεί σε στοιχεία ιστού.
- animate((αδιαφάνεια:'0.3'),1); — αυτή είναι η βέλτιστη διαφάνεια του στοιχείου.
- animate((opacity:'1.0'),600); — διαφάνεια του στοιχείου web κατά την αιώρηση.
- animate((opacity:'0.3′),300); — επιστροφή του στοιχείου στην πρώτη διαφάνεια μετά την αφαίρεση του δρομέα από το στοιχείο.
Αφού διαμορφώσουμε το σενάριο όπως χρειαζόμαστε, μπορεί να εφαρμοστεί σε στοιχεία σχεδίασης ιστοσελίδων χρησιμοποιώντας μια κλάση, για παράδειγμα.
Το animation στις σύγχρονες ιστοσελίδες έχει γίνει εδώ και καιρό κάτι δεδομένο. Η διάλυση στοιχείων, τα αναδυόμενα μηνύματα, οι συρόμενες γκαλερί εικόνων βελτιώνουν την εμπειρία χρήστη και αυξάνουν την απόδοση του ιστότοπου. Στη δημοφιλή βιβλιοθήκη javascript jQuery, η fadeIn() είναι μία από τις βασικές λειτουργίες κινούμενων εικόνων. Ελέγχει τη διαφάνεια των μπλοκ.
Εξασθένιση εφέ
Η μέθοδος fadeIn() διασφαλίζει ότι η διαφάνεια του στοιχείου που μεταβιβάζεται σε αυτό αλλάζει στο 100%. Στη βιβλιοθήκη jQuery, συνδυάζεται με τη συνάρτηση fadeOut(), με την οποία μπορείτε να επαναφέρετε τη διαφάνεια και έτσι να "διαλύσετε" το στοιχείο.
Μπορεί να σας ενδιαφέρει:
Ένα παρόμοιο αποτέλεσμα μπορεί να επιτευχθεί χρησιμοποιώντας τη μέθοδο fadeTo(), της οποίας το εύρος επιρροής είναι ακόμη μεγαλύτερο. Η FadeTo() μπορεί να ορίσει οποιαδήποτε τιμή διαφάνειας μεταξύ 0 και 1.
Σύνταξη μεθόδου
Η μέθοδος fadeIn() του jQuery καλείται στο πλαίσιο του στοιχείου του οποίου η διαφάνεια πρέπει να αλλάξει. Μπορεί να πάρει από μηδέν έως τρεις παραμέτρους:
element.fadeIn(); element.fadeIn(duration); element.fadeIn(διάρκεια, επανάκληση); element.fadeIn(duration, easing, callback); element.fadeIn(config);
Το όρισμα duration καθορίζει το χρόνο κατά τον οποίο θα εμφανιστεί η κίνηση. Αυτός μπορεί να είναι ένας αριθμός που υποδεικνύει τον αριθμό των χιλιοστών του δευτερολέπτου ή μία από τις λέξεις-κλειδιά:
- "γρήγορο" (200ms);
- "αργή" (600ms);
Εάν η διάρκεια δεν έχει οριστεί, θα είναι προεπιλεγμένη στα 400 χιλιοστά του δευτερολέπτου.
Η παράμετρος επανάκλησης υποδηλώνει μια συνάρτηση που θα κληθεί αμέσως μετά την ολοκλήρωση της κινούμενης εικόνας. Η λειτουργία επανάκλησης δεν δέχεται καμία παράμετρο. Αυτή η μεταβλητή μέσα σε αυτήν αναφέρεται στον κόμβο DOM που τροποποιείται.
Το όρισμα easing ελέγχει τη λειτουργία χρονισμού της κινούμενης εικόνας, δηλαδή την ταχύτητά της ανάλογα με το χρόνο. Με τη βοήθειά του, μπορείτε να επιταχύνετε την αρχή και να επιβραδύνετε το τέλος του κινούμενου σχεδίου ή να το κάνετε ομοιόμορφο σε όλη τη διάρκεια. Η τιμή του ορίσματος είναι μια συμβολοσειρά που περιέχει τη λέξη-κλειδί, με προεπιλογή τη συνάρτηση "swing".
Στο παρακάτω παράδειγμα, η jQuery fadeIn() θα αυξήσει σταδιακά την αδιαφάνεια ενός στοιχείου με κλάση .block για ένα δευτερόλεπτο, μετά από το οποίο θα εκτυπώσει ένα μήνυμα στην κονσόλα:
$(".block").fadeIn(1000, linear, function() ( console.log("Η κίνηση ολοκληρώθηκε"); ));
Εάν οι αναφερόμενες παράμετροι δεν επαρκούν, η μέθοδος μπορεί να μεταβιβαστεί σε ένα αντικείμενο διαμόρφωσης, το οποίο μπορεί να περιέχει έως και 11 διαφορετικές ρυθμίσεις.
Λειτουργίες επανάκλησης
Η παράμετρος επανάκλησης που μεταβιβάστηκε στη μέθοδο jQuery fadeIn() είναι μια πολύ χρήσιμη επιλογή επειδή η αλλαγή της ιδιότητας γίνεται ασύγχρονα, χωρίς να εμποδίζεται η συνολική ροή κώδικα.
const callback = function() ( console.log("Animation ολοκληρωμένη"); ); $(".στοιχείο").fadeIn(1000); επανάκληση();
Σε αυτό το παράδειγμα, η συνάρτηση θα εκτελεστεί αμέσως μετά την έναρξη της κινούμενης εικόνας, χωρίς να περιμένει να εμφανιστεί πλήρως το στοιχείο.
Για να λειτουργήσουν όλα όπως προβλεπόταν, θα πρέπει να χρησιμοποιήσετε ένα όρισμα επανάκλησης για να πιάσετε το τέλος της κινούμενης εικόνας:
const callback = function() ( console.log("Animation ολοκληρωμένη"); ); $(".element").fadeIn(1000, επιστροφή κλήσης);
Τώρα ένα μήνυμα θα εκτυπωθεί στην κονσόλα μόνο όταν το στοιχείο γίνει πλήρως ορατό.
Πλήρης διαφάνεια και απόκρυψη στοιχείου
Όπως γνωρίζετε, μια μηδενική τιμή της ιδιότητας αδιαφάνειας δεν αφαιρεί το στοιχείο από τη σελίδα, αλλά το κάνει μόνο αόρατο. Αυτή η συμπεριφορά δεν είναι κατάλληλη αν θέλουμε να κρύψουμε κάποιο μπλοκ.
Επομένως, οι μέθοδοι fade της βιβλιοθήκης jQuery fadeIn(), fadeTo() και fadeOut() λειτουργούν με διαφάνεια σε συνδυασμό με την ιδιότητα εμφάνισης. Ένα πλήρως διαφανές στοιχείο κρύβεται χρησιμοποιώντας την οθόνη: Κανένας κανόνας και πριν εμφανιστεί, αυτός ο κανόνας ακυρώνεται.
Σε αυτό το σεμινάριο θα δούμε ένα παράδειγμα αλλαγής της διαφάνειας του JQuery. Παρόμοια θέματα έχουν ήδη συζητηθεί στο μάθημα, καλά, η αρχή της λειτουργίας του σεναρίου βασίστηκε σε ένα απλό CSSΚαι html, σε αυτό το μάθημα θα θίξουμε επίσης JQueryΕπιπλέον, υπήρξε μια απλή αλλαγή της εικόνας κατά την αιώρηση, η διαφάνεια εκτελείται αμέσως ( αδιαφάνεια).
Νομίζω ότι έχετε ήδη παρακολουθήσει δύο demo και έχετε καταλάβει τη διαφορά στο πώς λειτουργούν τα σενάρια. Ας δούμε τώρα τον κώδικα για αυτό το σεμινάριο.
Το πρώτο βήμα. HTML.
Και έτσι έχουμε ένα αρχείο index.php.
Σε αυτό, πρώτα συμπεριλαμβάνουμε τη βιβλιοθήκη jquery.js. Κατεβάστε το μόνοι σας και συνδέστε το μεταξύ ετικετών κεφάλι.
Στη συνέχεια θα δούμε JQyeryκώδικα που θα αλληλεπιδράσει με την τάξη img. Αρχικά, γράφουμε μια συνάρτηση που έχει την κλάση imgκαι ορίστε τη διαφάνεια 50% στην αρχική του θέση. Δηλαδή η εικόνα χωρίς να την δείχνει έχει τη μισή της διαφάνεια. Στη συνέχεια, όταν εκτελείται μια ενέργεια αιώρησης στην εικόνα, καλείται μια συνάρτηση που αλλάζει τη θέση της κλάσης imgστην αδιαφανή θέση. Αφού ολοκληρωθεί η στόχευση στην εικόνα, η λειτουργία μεταβαίνει στην αρχική αρχική θέση. Χαρακτηριστικό διαφάνειας εικόνας αδιαφάνεια. Μπορείτε να το μελετήσετε αναλυτικά στην τεκμηρίωση για CSS.
$(function() ( // ορίστε τη διαφάνεια της εικόνας στο 50% $(".img").css("opacity","0.5"); // τοποθετήστε το ποντίκι πάνω από την εικόνα $(".img"). hover( function () ( // μετά την οποία η διαφάνεια εξαφανίζεται $(this).stop().animate(( opacity: 1.0 ), "slow"); ), // αφού αφαιρέσετε το ποντίκι πάνω από τη συνάρτηση εικόνας () ( // η διαφάνεια επιστρέφει στην αρχική θέση 50% $(this).stop().animate(( opacity: 0.5), "slow" ));
Δεύτερο βήμα. Αρχείο στυλ CSS.
Καταχωρίστε την ετικέτα divκαι δώστε του μια τάξη εικόνεςθα υποδείξουμε μερικά στυλ σε αυτό CSSγια την εικόνα (προαιρετικό, είναι απλώς για να μπορείτε να δείτε καλύτερα πώς λειτουργεί αυτό το σενάριο). Τώρα ας προσθέσουμε μια ετικέτα imgσε αυτό υποδεικνύουμε τη διαδρομή προς την εικόνα και ορίζουμε την κλάση img, το οποίο αλληλεπιδρά με JQueryτον παραπάνω κωδικό.
Μερικά στυλ CSSγια καλύτερη σαφήνεια.
Εικόνες ( περίγραμμα: 1px συμπαγές #363636; πλάτος: 300px; χρώμα φόντου: #2d2d2d; padding: 8px; )
Το σενάριο είναι απλό στο είδος του, γεγονός που το καθιστά πιο σχετικό με την εφαρμογή αλλαγών διαφάνειας εικόνας κατά την τοποθέτηση του δείκτη. Σας συμβουλεύω να παίξετε με JQyeryκώδικα, όπου υπάρχουν τρεις συναρτήσεις: αρχική, κατά την τοποθέτηση και κατά την αφαίρεση του ποντικιού. Θα είναι δυνατό να δείξουμε διαφορετικότητα. Ας πούμε στην αρχική θέση υποδεικνύουν αδιαφάνεια 0,5, σε αιώρηση αδιαφάνεια 1.0, και από την αφαίρεση της καθοδήγησης αδιαφάνεια 0,2. Αυτό θα έχει ως αποτέλεσμα μερικές πολύ ενδιαφέρουσες ενέργειες με την εικόνα!
