Artykuł
11/28/2011

JQuery - Animacje

Autor: Artur Jankowski

Opublikowano: 2011-11-28

W kolejnej odsłonie frameworka jQuery poznamy metody, które uczynią nasze witryny przyjemnymi dla oka. W niniejszym artykule opiszę sposoby modyfikowania stylów CSS za pomocą jQuery, jak również pokażę, w jaki sposób można stworzyć atrakcyjną animację.

CSS

Pobieranie wartości CSS

Zaczniemy od ustawiania stylów CSS w dokumencie HTML. Główną metodą jQuery do modyfikacji stylów CSS jest metoda .css(). Za jej pomocą można odczytywać wartości już istniejące, jak również ustawiać je na nowe wartości.

Aby pobrać interesującą nas wartość wybranej właściwości, w argumencie funkcji .css() podajemy jej nazwę:

.css('background-color') 
.css('backgroundColor')

Jak widać, w powyższych kodach, interesującą nas wartość można zapisać w dwojaki sposób: zgodnie z zapisem stylów CSS lub zgodnie z notacją CamelCase, w której to ciąg słów jest zapisywany jako jeden wyraz, lecz każdy nowy zaczyna się od wielkiej litery (z wyjątkiem pierwszego wyrazu).

Oczywiście metode .css() wywołuje się na obiekcie jQuery:

var  fsize = $(‘p’). css(‘fontSize’);

Ustawianie wartości CSS

Aby ustawić pojedynczą wartość właściwości stylu CSS wywołujemy metodę .css() z dwoma parametrami. Pierwszy z nich jest właściwością do ustawienia, natomiast drugi wartością którą chcemy mu nadać.

$(‘div’).css(‘background-color’,’yellow’);

Druga metoda przydatna jest wówczas, gdy chcemy za jednym razem ustawić więcej niż jedną właściwość. Metoda .css() jako parametr przyjmuje tablicę asocjacyjną, która nie jest niczym innym niż tablicą par właściwości i wartości.

$(‘div’).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});

Animacje

Główną metodą tworzenia animacji jest metoda .animate(). Jednakże zanim ją omówimy, poznamy prostsze metody, które wymagają mniejszego nakładu pracy.

show() oraz hide()

Dwie metody, które są często wykorzystywane do pokazywania i ukrywania elementów, to .hide() oraz .show().

Poniższy przykład demonstruje proste ich użycie:

<p id="example">Pokaż/ukryj</p>
<div id="example_info" style="display:none;">
Demonstracja działania funkcji hide() oraz show()
</div>

$(document).ready(function()
{
$('#example').hover(function(){
    $('#example_info').show();
    },
    function(){
    $('#example_info').hide();
    });
});

W powyższym przykładzie, po najechaniu kursorem na tekst „Pokaż/ukryj”, zostaje pokazany tekst, znajdujący się w bloku <div>, natomiast po opuszczeniu kursora, tekst znajdujący się w bloku <div> jest chowany. Podany przykład działa, lecz nie wykonuje żadnej animacji. Można to w prosty sposób zmienić, gdyż obydwie metody, zarówno .hide() jak i .show(), przyjmują jako parametr czas trwania wykonywanej przez nie akcji, czyli mówiąc w skrócie czas animacji. Można je wywołać z definiowaną już przez jQuery wartością tekstową ‘slow’, ‘normal’ oraz ‘fast’ np.:

$(‘#example_info’).show(‘fast’);

lub wartością liczbową, określającą czas w milisekundach np.:

$(‘#example_info’).show(900);

W rzeczywistości, metody wywołane z parametrem ‘slow’ wykonują się w 0,6 sekundy, ‘noraml’ w 0,4, natomiast ‘fast’ w 0,2 sekundy.

slideToggle()

Jest to odpowiednik metod .show() oraz hide() z tym, że nie wymaga on uprzedniego sprawdzenia, czy element jest schowany czy nie, bowiem tą czynność wykonuje automatycznie. Naszym obowiązkiem jest samo wywołanie metody .slideToggle() na elemencie.

fadeIn() oraz fadeOut()

Te dwie metody działają niemalże identycznie jak .show() oraz hide(), przyjmując nawet te same parametry. Jedyna różnica między nimi jest taka, że .fadeIn() oraz .fadeOut() ukazują i ukrywają element dzięki stopniowej zmianie przezroczystości, a .show() oraz .hide(), ukazując i odpowiednio ukrywając stopniowo część elementu.

slideDown() oraz slideUp()

Docelowe działanie tych funkcji jest identyczne jak w powyższym przypadku, jednakże efekt animacji temu towarzyszący przypomina zsuwanie i rozsuwanie.

animate()

Jest to już ostatnia, ale i najbardziej złożona funkcja animacyjna w jQuery, która ma ponadto dwa przeciążenia.

.animate:

tablica asocjacyjna to tablica właściwości wartości podobnie jak w przypadku metody {'background-color' : 'yellow', 'font-weight' : 'bolder'},
czas wykonania (parametr opcjonalny), podobnie jak w przypadku metody .hide(), .show() .fadeIn() itp.; jest to czas wykonywania animacji,
easing (parametr opcjonalny) określa sposób przejścia animacji: liniowy bądź też wahadłowy; domyślnie animacje wykorzystują przejście liniowe,
funkcja zwrotna (parametr opcjonalny) to po prostu funkcja wywoływana po zakończeniu animacji.

Przykład:

$(document).ready(function()
{
$('#example').hover(function(){
    $('#example_info').animate({'font-size': '+=10px'}, 'slow');
    },
    function(){
    $('#example_info').animate({'font-size': '-=10px'}, 'slow');
});
});

Drugi przykład pokazuje nam użycie wartości ‘toggle’ jako wartości właściwości. Wartości ‘toggle’, ‘show’ oraz ‘hide’ to skrótowe wartości jQuery, które mają uprościć nam pracę, w niektórych sytuacjach:

$(document).ready(function()
{
$('#example').click(function(){
$('#example_info').animate({'width':'toggle','fontSize':'toggle'},'slow');
});
});

Druga postać metody .animate() przyjmuje dwie tablice asocjacyjne, w których pierwsza, jak poprzednio, jest tablicą właściwości, a druga opcji:

.animate( tablica asocjacyjna właściwości, tablica asocjacyjna opcji);

Wszystkie parametry opcjonalne z pierwszego przeciążenia metody .animate() można ująć w tablicy asocjacyjnej opcji.

Kolejkowanie animacji

Aby wykonać jedną animację po drugiej za pomocą funkcji omówionych wcześniej, wystarczy wywoływać je kolejno po sobie.

$(document).ready(function()
{
$('#example').click(function(){
$('#example_info').slideUp('normal')
.slideDown('fast')
.animate({'width':'toggle','fontSize':'toggle'},'slow')
.animate({'width':'toggle','fontSize':'toggle'},'slow');
});
});

Podsumowanie

Stosując metody, opisane w tym artykule, jesteśmy już w stanie dynamicznie zmieniać rozmiar czcionki, jej kolor czy nawet obie te rzeczy, jedna po drugiej lub jednocześnie. Tak naprawdę efekty, jakie możemy wykonać za pomocą jQuery zależą tylko od naszej wyobraźni. Jeżeli kogoś zainteresował powyższy temat polecam stronę http://api.jquery.com/animate/.Dowiecie się z niej więcej o metodzie .animate(), której niektóre możliwości pozwoliłem sobie opisać.

Share via