Εάν ξεκινήσατε πρώτα με το jQuery πριν από πολλά χρόνια, ίσως ήταν η ικανότητά σας να κάνετε κινούμενα σχέδια. Αυτή ήταν ίσως μια από τις πρώτες μεγάλες κληρώσεις του jQuery. Αυτές τις μέρες, το CSS μπορεί να κάνει κινούμενα σχέδια επίσης με αρκετά αξιοπρεπή υποστήριξη προγράμματος περιήγησης και τείνει να είναι πιο αποτελεσματικό, επομένως είναι λιγότερο σχετικό. Ωστόσο, εάν χρειάζεστε υποστήριξη σε πολύ βαθύ πρόγραμμα περιήγησης, το jQuery είναι απολύτως μια επιλογή.
Έχουμε ήδη καλύψει τον τρόπο αλλαγής CSS στο jQuery. Μοιάζει με αυτό:
$("#element").css(( "background-color": "red", "left": "20px" ));Αντί να μετατοπίζουμε αμέσως αυτό το στοιχείο σε αυτές τις τιμές, μπορούμε να τις κινούμε. Μοιάζει σχεδόν το ίδιο:
$("#element").animate(( "background-color": "red", "left": "20px" ));Εδώ είναι το στυλό που δημιουργήσαμε στο βίντεο:
Δείτε το στυλό e111fbfa7506d19034d977b17e2160a3 του Chris Coyier (@chriscoyier) στο CodePen
Εάν ελέγξουμε αυτό το στοιχείο στα εργαλεία dev των προγραμμάτων περιήγησης, μπορούμε να δούμε κάτω από την κουκούλα πώς το jQuery κάνει αυτό το κινούμενο σχέδιο. Ουσιαστικά, επαναλαμβάνει γρήγορα το ενσωματωμένο στυλ που εφαρμόζεται σε αυτά τα στοιχεία
Σε αυτό το βίντεο ανακαλύπτουμε έναν κώδικα jQuery που έγραψε κάποιος άλλος για να δει πόσο καλά μπορούμε να το τεμαχίσουμε.
Δείτε το animate ύψος Pen jQuery: auto από τον Josh Parrett (@JTParrett) στο CodePen
Κατά τη διάρκεια αυτού του ταξιδιού, προχωράμε σε μια ενδιαφέρουσα μικρή δευτερεύουσα διαδρομή για κινούμενα σχέδια σε αυτόματα ύψη. Αυτό είναι κάτι που ούτε CSS ούτε JavaScript μπορεί να κάνει ιδιαίτερα καλά. Προτιμούν σκληρούς αριθμούς. Τα ζωικά 10px έως 200px έχουν νόημα. Το Animate 10px στο "ό, τι θα είχατε κανονικά" δεν είναι τόσο εύκολο.
Στον κώδικα του Josh, βρίσκουμε μια έξυπνη συνάρτηση που ορίζει ουσιαστικά το ύψος σε αυτόματο, το μετράει, το επαναφέρει σε αυτό που ήταν και στη συνέχεια ζωντανεύει σε αυτήν την πρόσφατα δοκιμασμένη τιμή. Αρκετά τακτοποιημένο κόλπο! Για μια πιο ισχυρή επίδειξη που πηγαίνει μπρος-πίσω και σε ακατέργαστη JavaScript, δείτε εδώ.
Δεν το παρατήρησα μετά το τέλος του βίντεο, αλλά το jQuery μας βοηθάει να το κάνουμε και αυτό. Υποβάλετε το αρχείο για λόγους χρήσης του jQuery # 40985. Χρησιμοποιώντας το .slideUp/ .slideDown/ .slideToggle- λειτουργεί με κάποιο τρόπο, ακόμα κι αν το στοιχείο είναι κρυμμένο για display: noneνα ξεκινήσει.
Δείτε το Pen jQuery animate ύψος: αυτόματα από τον Chris Coyier (@chriscoyier) στο CodePen
Για να δοκιμάσουμε τη δουλειά μας στο παλιό IE, χρησιμοποιήσαμε το BrowserStack, το οποίο είναι επίσης ενσωματωμένο στο CodePen.