Samouczek jQuery - Animacja  

Autor: Aurelia Tokarek

Opublikowano: 2012-02-24

Animacja jest jednym z ważniejszych elementów nowoczesnej strony. Biblioteka jQuery pozwala na dodanie interesujących efektów animacji bez konieczności zmian w kodzie HTML ani dodatkowych wtyczek (ang. plugin).

Przed wykonaniem zadań powinieneś wiedzieć:

• jak tworzyć strony internetowe,
• jak wskazać element za pomocą parametru id oraz class
• jak komunikować się w JavaScript.

Po wykonaniu zadań nauczysz się:

• wyświetlać i chować elementy za pomocą różnych animacji,
• ukrywać elementy,
• tworzyć niestandardowe animacje.

Implementacja

W przeglądarce Internet Explorer 9 otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, to zobacz Jak przygotować stronę samouczka. W elemencie head umieść następujący kod:

<script type="text/javascript"  src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

Naszym zadaniem będzie umożliwienie zwijania, ukrywania, a także wyświetlania elementów zawartych na naszej stronie za pomocą prostych animacji.

Rys. 1. Działanie animacji fadeTo.

Zwijanie elementów za pomocą slideToggle

Ukrywania lub ujawnianie wskazanych elementów jest możliwe dzięki m.in. slideToogle(). Jeśli początkowy element będzie ukryty, zostanie wyświetlony, jeżeli będzie wyświetlony, zostanie ukryty. Poznana w poprzednim odcinku, metoda toggle() umożliwia animowanie ukrywania bądź pokazywania elementu dopiero po podaniu parametrów. Funkcja slideToggle() powoduje przesuwanie wybranej przez nas zawartości strony w górę lub w dół.

1. W przeglądarce Internet Explorer 9 otwórz stronę internetową jQTest.html.
2. Wciśnij klawiszF12 lub wybierz Narzędzia>F12 Narzędzia deweloperskie.
3. Kliknij w oknie na zakładkę Script (oznaczoną 1 na Rys. 2.), a w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 2.), wpisz:

$('p').click(function(){$('li').slideToggle("slow");})

Rys. 2. Narzędzia programistyczne do jQuery w Internet Explorer 9.

4. Wciśnij Enter.
5. Kliknij na dowolny akapit na stronie jQTest.html.
6. Powinny się zwinąć wszystkie elementy wypunktowane.
7. Kliknij ponownie na jeden z akapitów, aby wypunktowane elementy pojawiły się ponownie.
8. Odśwież stronę.
9. Zamień w poleceniu slow na fast:

$('p').click(function(){$('li').slideToggle("fast");})

10. Kliknij ponownie, na jeden z akapitów, aby elementy wypunktowane pojawiły się ponownie. Porównaj działanie z poprzednim poleceniem.
11. Odśwież stronę.

Informacja

Ustawienie wartości na slow wskazuje na czas trwania 600 milisekund, wartość fast wskazuje na 200 milisekund.

Ukrywanie elementów

Do ukrywania elementów służy metoda hide(). Podobnie, jak w przypadku poprzedniej metody potrzebne jest podanie parametrów fast lub slow, aby była to animacja. Jest to najprostszy sposób ukrywania elementów.

1. W oknie narzędzi deweloperskich, w prawym dolnym rogu wpisz:

$('h1').click(function(){$(this).hide("slow");})

2. Wciśnij Enter.
3. Kliknij w nagłówek strony i zobacz, co się stanie.
4. Odśwież stronę.

Wyświetlanie i ukrywanie elementów z wykorzystaniem fadeTo i fadeToggle

Ciekawy efekt uzyskuje się poprzez zastosowanie metod fadeTo i fadeToggle do ukrywania/wyświetlania elementów poprzez animację ich przezroczystości.

1. Po odświeżenie strony, w oknie narzędzi deweloperskich, w prawym dolnym rogu wpisz:

$("p").click(function(){$(this).fadeTo("slow", Math.random());})

2. Wciśnij Enter.
3. Klikaj w poszczególne akapity i obserwuj, co się dzieje (Rys. 1.).
4. Odśwież stronę.
5. W prawym dolnym rogu wpisz:

$("p").click(function(){$(this).fadeToggle("slow","linear");})

6. Wciśnij Enter.
7. Przetestuj działanie, klikając w akapity.
8. Odśwież stronę.

Informacja

EfektfadeTo(), w przeciwieństwie do innych metod, wymaga, aby czas trwania był jawnie określony. Math.random() – generator liczb pseudolosowych.

Wyświetlanie i ukrywanie elementów z wykorzystaniem slideUp i slideDown

Efekt slideUp() powoduje przesuwanie się dolnej części strony ku górze w celu ukrycia elementów, a slideDown() ujawnia elementy poprzez zjazd dolnej części strony. Te dwa efekty można połączyć razem poprzez użycie pętli warunkowej if() else().

1. W oknie narzędzi deweloperskich, w prawym dolnym rogu wpisz:

$("p").click(function(){if($("li").is(":hidden")){$('li').slideDown("slow");}else{$('li').slideUp("fast");};})

2. Wciśnij Enter.
3. Przetestuj działanie.
4. Odśwież stronę.

Informacja

Pominięcie parametru czasu trwania (fast lub slow) powoduje wyświetlenie się animacji z domyślnie ustawionym czasem 400 milisekund.

Niestandardowa animacja

Metoda animate() pozwala na tworzenie niestandardowych animacji. Parametry przypominają właściwości ustawiane podczas tworzenia kaskadowego arkusza stylu.

Rys. 3. Strona po zastosowaniu efektu animate().

1. W oknie narzędzi deweloperskich, w prawym dolnym rogu wpisz:

$("p").click(function(){$("li").animate({width:"70%",fontSize:"3em"},2000);})

2. Wciśnij Enter.
3. Przetestuj działanie (Rys. 3.).

Informacja

Właściwości CSS (np. border, background, margin) nie są obsługiwane.

Podsumowanie

W tym artykule nauczyliśmy się  dodawać proste animacje do strony. Wiemy, w jaki sposób po kliknięciu w dany element, ukryć bądź pokazać inny element, zawarty na naszej stronie, przy wykorzystaniu prostych, ale zarazem ciekawych efektów.

 

---