Jeśli po raz pierwszy zajmowałeś się jQuery wiele lat temu, może to być umiejętność tworzenia animacji. To było prawdopodobnie jedno z pierwszych wielkich losowań jQuery. Obecnie CSS może również wykonywać animacje z dość przyzwoitą obsługą przeglądarek i jest zwykle bardziej wydajny, więc jest mniej odpowiedni. Jeśli jednak potrzebujesz bardzo głębokiej obsługi przeglądarki, jQuery jest absolutnie nadal opcją.
Omówiliśmy już, jak zmienić CSS w jQuery. To wygląda tak:
$("#element").css(( "background-color": "red", "left": "20px" ));Zamiast natychmiast przenosić ten element do tych wartości, możemy je animować. Wygląda prawie dokładnie tak samo:
$("#element").animate(( "background-color": "red", "left": "20px" ));Oto pióro, które zrobiliśmy na filmie:
Zobacz pióro e111fbfa7506d19034d977b17e2160a3 autorstwa Chrisa Coyiera (@chriscoyier) na CodePen
Jeśli przyjrzymy się temu elementowi w narzędziach programistycznych przeglądarki, możemy zobaczyć pod maską, jak jQuery wykonuje tę animację. Zasadniczo szybko iteruje stylizację wbudowaną zastosowaną do tych elementów
W tym filmie zagłębiamy się w kod jQuery napisany przez kogoś innego, aby zobaczyć, jak dobrze możemy go przeanalizować.
Zobacz Pen jQuery animate height: auto autorstwa Josha Parretta (@JTParrett) na CodePen
Podczas tej podróży udajemy się w ciekawą, poboczną podróż na temat animacji do wysokości samochodów. Jest to coś, czego ani CSS, ani JavaScript nie mogą zrobić szczególnie dobrze. Wolą twarde liczby. Animacja od 10 do 200 pikseli ma sens. Animowanie 10px do „tego, czym byś normalnie był” nie jest takie łatwe.
W kodzie Josha znajdujemy sprytną funkcję, która zasadniczo ustawia wysokość na auto, mierzy ją, ustawia z powrotem na to, czym była, a następnie animuje do nowo przetestowanej wartości. Całkiem fajna sztuczka! Bardziej rozbudowane demo, które przechodzi w tę iz powrotem oraz w surowym języku JavaScript, znajduje się tutaj.
Nie zauważyłem tego, dopóki wideo się nie skończyło, ale jQuery również nam w tym pomaga. Zgłoś powód do użycia jQuery # 40985. Używanie .slideUp/ .slideDown/ .slideToggle- po prostu działa jakoś, nawet jeśli element jest ukryty, display: noneaby rozpocząć.
Zobacz Pen jQuery animate height: auto autorstwa Chrisa Coyiera (@chriscoyier) na CodePen
Aby przetestować naszą pracę w starym IE, użyliśmy BrowserStack, który jest również zintegrowany z CodePen.