Kurs jQuery #4 – Animacje

Nareszcie. To jest właśnie ta fajna, moim zdaniem najciekawsza, część jQuery. Zaraz obok selektorów pozwoli Ci ona na ogromne przyspieszenie twojej pracy. To właśnie tutaj jesteśmy w stanie jako programiści zaoszczędzić masę kodu. Czym dokładnie są animacje o których mówię z takim entuzjazmem? To pokazywanie i ukrywanie elementów, zmienianie ich rozmiarów czy przesuwanie dzięki pojedynczym komendom. Super sprawa jeśli małym nakładem pracy chcemy uzyskać naprawdę ciekawe efekty.

Pokazywanie i ukrywanie elementów

Zacznijmy na początku od odpowiedniego przygotowania sobie środowiska pracy.

Jak widać zastosowałem tutaj już jedną metodę – hide(). Odpowiada ona za schowanie elementu na stronie. W tej wersji może nie jest to zbyt przyjemne dla oka ale hide() pozwala na modyfikację efektu zanikania obiektu. Szybkość jego znikania można zdefiniować pierwszym argumentem. Jest to liczba albo ciąg znaków. Jeśli mówimy o ciągu znaków mamy do dyspozycji opcję “slow” która odpowiada liczbowej wartości 600 i “fast” a więc 200. Jest to ilość milisekund jaką będzie wykonywana operacja. Domyślnie bez podawania żadnego argumentu jest to 400. Oczywiście jeśli chodzi o wartość liczbową możemy podać dowolną. Drugim argumentem jaki możesz przekazać do funkcji jest funkcja anonimowa wykonywana po zakończeniu animacji.

Jeśli będziesz chciał ponownie wyświetlić użytkownikowi taki element na stronie, na przykład po tym jak dokonasz na nim już odpowiednich operacji możesz to zrobić za pośrednictwem show()Działa ono dokładnie odwrotnie do hide().

Żeby efekt zadziałał tak jak chcemy element musi być schowany a więc mieć ustawioną wartość display na none. Jeśli jednak nie chcemy sprawdzać czy dany element jest w tym momencie schowany i powinniśmy użyć funkcji show() a czy wręcz odwrotnie ułatwieniem i udogodnieniem dla nas jest funkcja toggle().

Jeśli element był widoczny zostanie schowany a jeśli nie był to zostanie pokazany.

Zanikanie i ponowne pojawianie się

Być może potrzebujesz trochę innej funkcjonalności czy efektu niż te które oferują Ci hideshow. Na pomoc przychodzą funkcję zanikania. Omówimy je sobie po kolei.

Idąc analogicznie do poprzedniego podpunktu najpierw zajmiemy się zniknięciem elementu. Przysłuży się nam tutaj funkcja fadeOut().

Żeby element który zniknął w ten sposób pojawił się podobnie na stronie musimy użyć przeciwnej funkcji czyli fadeIn()

Analogicznie do show() element, żeby dało to jakiś efekt, musi być niewidoczny. Mamy do dyspozycji też odpowiednik toggle() żeby nie musieć ustalać czy element jest w tym właśnie momencie widoczny czy też nie – fadeToggle()

Mamy do dyspozycji jeszcze jedną funkcję – fadeTo()Określa do jakiego stopnia przezroczystości ma przejść dany element. Również może to dziać się w określonym tempie.

Wysuwanie i wsuwanie elementów

Jeśli chcemy schować jakiś element na zasadzie jego wsunięcia się do góry mamy do dyspozycji – slideUp(). Zachowujący się podobnie do hide() czy fadeOut().

Odpowiednikiem show() albo fadeIn() jest tutaj slideDown().

Również i tutaj jest funkcja z gatunku toggle która pozwala nam na zapomnienie o tym czy element na daną chwilę jest widoczny czy też nie.

Animacje na poważnie

Dobra, pobawiliśmy się już trochę w ukrywanie i pokazywanie elementów na różne sposoby ale to oczywiście nie wszystko. jQuery zapewnia znacznie bardziej rozbudowany mechanizm tworzenia własnych animacji i stosowania ich na elementach strony. Takie możliwości daje nam zaledwie jedna funkcja – animate(). Przyjrzyjmy się jak dokładnie działa a później omówimy sobie pełne spectrum jej możliwości.

Być może wygląda to bardziej skomplikowanie ale w rzeczywistości to bajecznie proste. Pierwszym argumentem jest obiekt który zawiera właściwości będące właściwościami CSS dla danego obiektu. Po nadaniu mu tutaj odpowiednich właściwości są one stosowane tak szybko jak jest to określone drugim parametrem którym jest szybkość wykonania animacji w milisekundach. Trzecim argumentem jest natomiast funkcja anonimowa wykonywana po wykonaniu już całości animacji. Pamiętaj jednak, że żeby wszystkie animacje działały tak jakbyś sobie tego życzył musisz nadać elementowi DOM na którym będziesz ich dokonywał position na absolute, fixed bądź relative.

Myślę, że najciekawszym aspektem jest tutaj pierwszy argument dlatego też zademonstruję Ci trochę bardziej rozbudowany przykład, żebyś nie miał wątpliwości jak dokładnie to wszystko działa.

Wartości takie jak left, top, width, height itd. możemy zwiększać też o określoną liczbę od ich oryginalnych rozmiarów. Nie musimy ustawiać kompletnie nowego rozmiaru.

Jak widzisz całość animacji wykonuje się tak jakby jednocześnie. Wszystkie właściwości zmieniają się od razu. My jednak możemy chcieć zrobić to bardziej stopniowe. W tym celu musimy zakolejkować kilka animacji po sobie. Robimy to tak, że piszemy zwyczajnie kolejno animate() i w poszczególnych etapach ustalamy co konkretnie ma się zmienić i ile czasu ma to zająć.

Zatrzymywanie na żądanie

Jeśli chcemy przerwać animację w jakimś określonym momencie podczas jej trwania to na pewno przyda się stop()Wersja bez żadnych argumentów zadziała dla pojedynczej animacji. Jeśli jednak mamy ich dla danego elementu zakolejkowanych kilka to musimy przekazać jako argument wartość true. Wtedy zatrzymujemy wykonywanie konkretnej animacji w określonym momencie i wstrzymujemy wykonywanie kolejnych. Jeśli jako drugi argument również podalibyśmy true wtedy kolejka animacji nie dość, ze zostałaby zatrzymana to dodatkowo wyczyszczona.

Wywołanie łańcuchowe

Animacje możemy również wykonywać na kolejnych elementach łańcuchowo i cały ciąg zapisać nawet w jednej linijce, tak jak poniżej.