Kurs jQuery. Część 3: Dynamiczna witryna. AJAX i efekty interfejsu

Efekty – miły oku interfejs zawsze w cenie

Biblioteka jQuery dostarcza trzy predefiniowane efekty: zanikanie i pojawianie się – metody fadeOut(), fadeIn() i fadeTo(), zsuwanie i rozsuwanie – metody slideUp(), slideDown() i slideToggle() oraz wyświetlanie i ukrywanie – metody show(), hide() i toggle().

Metody jQuery wykorzystywane w konstruowaniu animacji.

Każda z metod, za wyjątkiem fadeTo(), przyjmuje dwa parametry: szybkość animacji (patrz wcześniejsza część artykułu) i opcjonalną funkcję zwrotną wywoływaną po jej zakończeniu. Metoda fadeTo() dysponuje aż trzema opcjami ustalającymi: szybkość, docelową przezroczystość i funkcję zwrotną.

Metody fade... odpowiadają za zmianę przezroczystości elementów, slide... – modyfikują ich wysokość, zaś show() i hide() animują jednocześnie wysokość, szerokość i przezroczystość, dając ciekawy efekt dwuwymiarowego rozwijania. Metody z toggle w nazwie to metody pomocnicze, które naprzemiennie wywołują jedną z dwóch głównych metod animacyjnych – dzięki nim oszczędzimy sobie pisania dłuższego kodu, jeśli animacja zależna będzie na przykład od stanu przycisku. Część metod przećwiczyliśmy już we wcześniejszym przykładzie, kilkoma innymi zajmiemy się w ostatnim fragmencie kodu prezentowanym w tym odcinku kursu.

Jeśli nie zależy nam na animacji i chcemy po prostu ukryć lub wyświetlić element, możemy skorzystać z metod show(), hide() lub toggle() bez podawania argumentów. W takiej sytuacji operacja wykonana zostanie natychmiast.

Zanim przejdziemy do najbardziej elastycznej metody animate(), warto jeszcze wspomnieć o metodzie i właściwości związanej z wyłączaniem efektów przejściowych. Ustawienie wartości właściwości $.fx.off jako true na stałe wyłącza wszystkie animacje – w tym trybie jQuery natychmiast przechodzi do stanu docelowego. Metoda stop() zatrzymuje aktualnie trwająca animację elementu, jeśli pierwszy parametr będzie równy false. Przekazanie wartości true spowoduje anulowanie wszystkich efektów obiektu, także tych będących w kolejce.