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.
- Przesuń element
#slideshow
na początek sekcjibody
. - 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ąć. - 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
.