Kolejny wpis o jQuery, poświęcimy najbardziej efektownej metodzie, .animate(). Gdy zachodzi potrzeba, wykonania płynnego przejścia z jednego stanu elementu, do drugiego, np. gdy chcemy płynnie zmienić padding, border-width czy też font-size, wtedy całą robotę wykona za nas .animate().
Dokumentacja .animate()
Zaglądając do API, dowiadujemy się jak używa się .animate(), czyli:
$(„selector”).animate( params, [duration], [easing], [callback] ),
gdzie selektor, to element, który chcemy animować. Oczywiście animacja, może być wywoływana przez dowolne zdarzenie, nie ważne czy najedziemy myszką czy klikniemy, etc.
Parametry (params), które może przyjmować animacja to min. :
- borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth
- height, width
- margin, marginLeft, marginRight, marginTop, marginBottom
- fontSize
- opacity
- padding, paddingBottom, paddingLeft, paddingRight, paddingTop
Czas trwania [duration], jest opcjonalny i definiuje się go w ms (1000 = 1 sekunda), lub słowami „slow”, „normal”, „fast”.
[Easing ], również jest opcjonalny i określa w jaki sposób zostanie wykonane przejście, liniowo bądź też wahadłowo (przyśpieszanie przejścia na początku i wygasanie na końcu jej trwania). Zignorowanie tego parametru, spowoduje wykorzystanie liniowego przejścia.
[Callback] definiuje jaka funkcja ma być wywołana po wykonaniu animacji i także jest opcjonalny.
Cel
Przejdźmy zatem do prostego przykładu, w którym wykorzystamy .animate(). Zadanie do zrealizowania, polegać będzie na stworzeniu 3 zdjęć, będących np. zajawkami artykułów na stronie, które po najechaniu na jedno z nich, będą „rozpychać” sąsiednie.
Realizacja
Zacznijmy od stworzenia prostego dokumentu z podstawowymi elementami:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Dawid Pośliński - jQuery.animate()</title> </head> <body> </body> </html>
Następnie, między znaczniki body, wstawimy strukturę naszego slidera:
Całość osadzona jest w boxie #slider, któremu zdefiniujemy szerokość. Blok #rband odpowiedzialny jest za zasłonięcie nieporządanego efektu, który powstanie w naszym przypadku po prawej stronie naszych animowanych bloków, a polegał on będzie na minimalnym (1-3px), pływaniu prawej krawędzi w trakcie animacji, spowodowanej nie jednoczesną animacją wszystkich boxów.
Dla .slide zdefiniujemy float: left, oraz wysokość, dla sbg1, sbg2 i sbg3 tła w postaci plików graficznych, natomiast dla sleft, scenter, sright szerokość naszych boxów. Posłużą one również do intuicyjnego odwoływania się z poziomu javascript.
.clear spowoduje, że wszystko pozostanie wewnątrz #slider-a.
Zatem dodajmy w sekcji head naszego dokumentu, niezbędny kod css:
Teraz pozostaje już tylko, do folderu pics dodać 3 obrazki (1.jpg, 2.jpg, 3.jpg), na co wskazują zdefinowane ścieżki w css, oraz dopisać kod jQuery wraz z dołączeniem samej biblioteki.
jQuery
Dodajmy poniższy kod na dole naszego dokumentu, tuż przed zamknięciem znacznika body:
Co tutaj się dzieje i o czym warto wiedzieć? Przede wszystkim, czekamy, aż dokument załaduje się w pełni, co gwarantuje nam zawarcie naszego kodu w funkcji, wewnątrz $(document).ready().
Następnie, sprawdzamy czy mysz jest na którymkolwiek z naszych 3 boxów. Jeśli tak to jako parametry funkcji hover(), podawane są funkcje, gdzie pierwsza oznacza akcje najechania myszki na obszar wybranego elementu, a druga wykonuje się, gdy kursor opuści obszar tego elementu.
W każdym z trzech .hover()-ów, wszystkie linie, w naszych funkcjach, po selektorze posiadają wywołanie funkcji .stop(). Służy ona do wyczyszczenia kolejki animacji, realizowanych na danym elemencie. Zapobiegamy tym samym, wielokrotnej animacji elementu, w momencie, gdy użytkownik energicznie będzie opuszczał obszar tego samego elementu.
Następnie realizujemy .animate(), w którym zmieniamy szerokość elementu. Animacja trwa 0,5 sec i jest liniowa.
Jak widać, w różnych .hover()-ach, odwołujemy się do różnych elementów, ponieważ musimy odwoływać się tylko do sąsiada/ów danego elementu. W przypadku bocznych bloków, będzie to .scenter. W przypadku centralnego, będą to oba boczne, czyli .sleft i sright.
Podsumowanie
Oczywiście niniejszy przykład, można znacznie urozmaicić, np. po najechaniu myszką, dodając dodatkowo wewnątrz bloków, pojawiający się napis (zmiana opacity) oznaczający np. tytuł artykułu lub zamiast ślizgających się obrazków, pojawiające się wyraźniej lub mniej wyraźnie obrazki (również przez modyfikacje opacity).
Zachęcam do dzielenia się w komentarzach pomysłami i przykładami wykorzystania .animate() w realizowanych projektach.
4 odpowiedzi na “jQuery: animate()”
Fajny przykład, wszystko dobrze opisane. Niedługo Twój blog stanie się skarbnicą wiedzy na temat jQuery 😀
Co do animate to też jakieś proste przykłady w moim kursie http://soundpage.info/kurs_javascript/kurs/70jQuery_animacje.html
I na koniec jakby to zapytał niejaki Robert B. „masz pan pozwolenie na te zdjęcia wykorzystane w przykładzie ?” 🙂
Tak się składa, że jestem ich autorem :).
Panie to ja nie chce wiedzieć po co Ty tak blisko tych owadów podchodzisz 😀 Nie no nie będę pisał bzdur chcesz to skasuj tego komenta 😛
Animate to bardzo przydatna funkcja JQuery. Między innymi dlatego, że samemu własnoręcznie przy pomocy kilku linii kodu JQuery można zrobić choćby wysuwanego baner facebooka, który jest ostatnio na fali 🙂 Pozdrawiam.