Rozdział 6. Efekty jQuery

Wprowadzenie

Korzystając z biblioteki jQuery możemy w banalny sposób wzbogacić stronę o proste efekty. Do ich uzyskania można używać wbudowanych ustawień lub definiować własne ustawienia czasu trwania. Można także tworzyć własne animacje dowolnych własności CSS.

Szczegółowe informacje na temat efektów jQuery dostępne są na stronie http://api.jquery.com/category/effects/.

Wbudowane efekty

Najczęściej używane efekty są dostępne w jQuery za pomocą wbudowanych metod:

$.fn.show

Pokazuje wybrany element

$.fn.show

Ukrywa wybrane elementy.

$.fn.fadeIn

Przezroczystość wybranych elementów jest stopniowo zmniejszana do 100%.

$.fn.fadeOut

Przezroczystość wybranych elementów jest stopniowo zwiększana do 0%.

$.fn.slideDown

Wybrane elementy są rozwijane w pionie.

$.fn.slideUp

Wybrane elementy są zwijane w pionie.

$.fn.slideToggle

Wybrane elementy są pionowo rozwijane lub zwijane, w zależności od tego, czy są widoczne.

Przykład 6.1. Prosty przykład wykorzystania wbudowanego efektu

$('h1').show();

Zmienianie czasu trwania wbudowanych efektów

Z wyjątkiem metod $.fn.show i $.fn.hide, animacja wszystkich wbudowanych metod domyślnie trwa 400 ms. Ustawienia te można zmienić w prosty sposób.

Przykład 6.2. Ustawiamy czas trwania efektu

$('h1').fadeIn(300);      // element pojawi się w całości w ciągu 300 ms
	$('h1').fadeOut('slow');  // jedno ze standardowych ustawień szybkości

jQuery.fx.speeds

W bibliotece jQuery znajduje się obiekt jQuery.fx.speeds, który zawiera domyślną szybkość animacji, a także ustawienia slow i fast (wolne i szybkie).

speeds: {
	    slow: 600,
	    fast: 200,
	    // domyślna szybkość
	    _default: 400
	}

Obiekt ten można również przedefiniować lub dodać do niego nowe składowe, np. jeśli chcemy zmienić domyślny czas trwania efektów lub wprowadzić własne ustawienia szybkości.

Przykład 6.3. Dodawanie własnych ustawień szybkości do obiektu jQuery.fx.speeds

jQuery.fx.speeds.blyskawicznie = 100;
	jQuery.fx.speeds.zolw = 2000;

Wykonywanie kodu po zakończeniu efektu

Często chcemy, aby po zakończeniu animacji został wykonany jakiś blok kodu — jeśli zostanie wykonany wcześniej, może obniżyć jakość animacji, bądź usunąć któreś z jej elementów. [Definicja: Funkcja wywołania zwrotnego umożliwia przechowanie bloku kodu, który zostanie wykonany w odpowiedzi na zajście danego zdarzenia w późniejszym czasie.] W tym przypadku zdarzeniem, do którego się będziemy odwoływać jest koniec animacji. Słowo kluczowe this wewnątrz funkcji wywołania zwrotnego odwołuje się do elementu, na którym został wywołany efekt. Podobnie jak w przypadku funkcji obsługi zdarzeń, element ten może zostać przekształcony w obiekt jQuery za pomocą konstrukcji $(this).

Przykład 6.4. Wykonanie kodu po skończeniu animacji

$('div.stary').fadeOut(300, function() { $(this).remove(); });

Jeśli selektor nie zwróci żadnych elementów, wywołanie zwrotne nigdy nie zostanie wykonane! Aby uniknąć tego problemu, należy sprawdzić, czy selektor wybrał jakieś elementy — jeśli nie, wywołanie zwrotne może zostać wykonane natychmiast.

Przykład 6.5. Kod wykonujący wywołanie zwrotne nawet jeśli nie ma żadnych elementów, które można by animować.

var $cos = $('#nieIstnieje');
	 
	var wz = function() {
	    console.log('zrobione!');
	};
	 
	if ($cos.length) {
	    $cos.fadeIn(300, wz);
	} else {
	    wz();
	}

Tworzenie własnych efektów za pomocą metody $.fn.animate

Dostępna w bibliotece jQuery metoda $.fn.animate umożliwia animację dowolnych własności CSS. Możemy ustawić konkretną wartość parametru animacji, bądź wartość względną do ustawionej już wartości.

Przykład 6.6. Tworzenie własnych efektów za pomocą metody $.fn.animate

$('div.trocheZabawy').animate(
	    {
	        left : "+=50",
	        opacity : 0.25
	    },
	    300, // czas trwania animacji
	    function() { console.log('zrobione!'); // wywołanie zwrotne
	});

Dynamika animacji

Definicja: Dynamika animacji to sposób w jaki wykonywany jest dany efekt — określa, czy zmiany zachodzą równomiernie, czy też w miarę upływu czasu animacja zwalnia lub przyspiesza. W bibliotece jQuery dostępne są tylko dwie metody pozwalające modyfikować dynamikę animacji: swing oraz linear. Jeśli zależy ci na płynniejszym przejściu animacji, możesz skorzystać z wielu dostępnych wtyczek.

W wersji jQuery 1.4 istnieje możliwość ustawienia dynamiki każdej własności z osobna poprzez metodę $.fn.animate.

Przykład 6.7. Ustawianie dynamiki animacji dla dwóch własności z osobna

$('div.trocheZabawy').animate(
	    {
	        left : [ "+=50", "swing" ],
	        opacity : [ 0.25, "linear" ]
	    },
	    300
	);

Więcej informacji na temat korzystania z powyższych metod znajdziesz na stronie http://api.jquery.com/animate/.

Zarządzanie efektami

W bibliotece jQuery dostępnych jest kilka narzędzi umożliwiających zarządzanie animacjami.

$.fn.stop

Zatrzymuje animację wybranych elementów.

$.fn.delay

Określa mierzony w milisekundach odstęp czasu między kolejnymi animacjami.

$('h1').show(300).delay(1000).hide(300);

jQuery.fx.off

Jeżeli wartość tej własności to true, animacje zostaną pominięte, a elementom od razu zostanie nadany ich docelowy stan, co przydaje się zwłaszcza w przypadku starszych przeglądarek. Wybór animacji możemy pozostawić również samemu użytkownikowi.

Ćwiczenia

Odkrywanie ukrytego tekstu

Otwórz w przeglądarce plik /exercises/index.html, a także skorzystaj z pliku /exercises/js/blog.js. Twoim zadaniem jest ożywić nieco znajdujący się na stronie blog. Oto szczegóły:

• Kliknięcie nagłówka w elemencie #blog div powinno spowodować pionowe rozwinięcie abstraktu
• Kliknięcie innego nagłówka powinno spowodować rozwinięcie dotyczącego go abstraktu oraz zwinięcie innego obecnie wyświetlanego abstraktu.

Wskazówka: nie zapomnij o selektorze :visible!

Rozwijane menu

Otwórz w przeglądarce plik /exercises/index.html, a także skorzystaj z pliku /exercises/js/navigation.js. Twoim zadaniem jest przekształcenie znajdującego się u góry strony menu w menu rozwijane.

• Po najechaniu kursorem na element menu powinny wyświetlić się jego elementy podmenu, jeśli istnieją.
• Po wycofaniu kursora podmenu powinno zostać ukryte.

Do wykonania ćwiczenia skorzystaj z metody $.fn.hover, za pomocą której możesz kontrolować widoczność elementów podmenu dodając im i usuwając odpowiednie klasy. Dzięki temu będziesz wiedzieć czy dane pozycje są widoczne. (Plik /exercises/css/styles.css zawiera potrzebną klasę hover).

Pokaz slajdów

Otwórz w przeglądarce plik /exercises/index.html i dodatkowo użyj pliku /exercises/js/slideshow.js. Twoim zadaniem jest wzbogacenie prostej strony HTML pokazem slajdów stworzonym z wykorzystaniem JavaScriptu.

1. Przesuń element #slideshow na początek sekcji body.
2. Napisz kod, który będzie cyklicznie przechodzić przez pozycje listy znajdującej się wewnątrz tego elementu. Każda z nich ma się wyłonić (fade in), pozostać wyświetlona przez kilka sekund, a następnie powoli zaniknąć.
3. Kiedy dojdziesz do końca listy, zacznij wyświetlanie obrazów od początku.

Jeśli chcesz spróbować czegoś trudniejszego, pod pokazem slajdów utwórz obszar nawigacji, który będzie podawał informacje na temat liczby wszystkich slajdów oraz pokazywał numer aktualnie wyświetlanego obrazu. Wskazówka: przyda się tu metoda $.fn.prevAll.