Witajcie w kolejnej części kursu jQuery – już tym razem 4., w której dowiecie się w jaki sposób zaprogramować podstawowe animacje w jQuery. Krok po kroku opiszę w jaki sposób budować animację bloków HTML-owych i zademonstruje jak w szybki i łatwy sposób to zrobić. Wszystko będzie naprawdę dziecinnie proste i opierać się będzie o bardzo przyjemną funkcję jQuery – animate()

Czego dowiesz się z artykułu?

• jak tworzyć animacje w jQuery
• jak wykorzystać funkcję jQuery animate()

Metoda animate()

Do celów demonstracyjnych zacznijmy od przygotowania sobie pustego DIV-a, na który zostaną nałożone style CSS-owe, jak pokazano poniżej:

.pojOne{
	width:300px;
	height:300px;
	background-color:#ff0000;
        position:absolute;
}

Efekt który chcemy osiągnąć, to animowane przemieszczenie utworzonego przez powyższe style czerwonego kwadratu w prawo o 300px, po kliknięciu w jego obszar – a wszystko za pomocą kilku zaledwie linijek kodu w jQuery. Zacznijmy od zdefiniowania funkcji, która zostanie odpalona w momencie gdy zostanie wczytany dokument HTML-owy (jeżeli nie jesteś jeszcze w temacie to odsyłam do pierwszej części kursu jQuery i drugiej części kursu jQuery).

Następnie przy pomocy selektorów CSS-owych w jQuery odnosimy się do obiektu o klasie „pojOne” i na zdarzenie kliknięcia definiujemy funkcję (podobnie jak w poprzednich częściach kursu). Teraz możemy przejść do części w której zajmiemy się animowaniem elementu. Za pomocą this odnosimy się do elementu którego dotyczy zdarzenie i wykonujemy na nim funkcję animate(). Funkcja animate, by poprawnie działa przyjmuje przynajmniej jeden parametr główny, składający się z przynajmniej jednego parametru składowego- para nazwa parametru (właściwości CSS) i jego wartość. Całość skryptu wygląda tak:

 $(function(){
	$(".pojOne").click(function(){
		$(this).animate({
			"left":"600px"
		});
	});
});

Przykład wykorzystania funkcji animate()

Tym sposobem zrealizowaliśmy naszą pierwszą animację z wykorzystaniem jQuery, ale co jeśli chcielibyśmy dodatkowo modyfikować prędkość wykonywania animacji? Nic bardziej prostego! W tym celu po pierwszym głównym parametrze dodajemy czas animacji w milisekundach – dla przykładu:

 $(function(){
	$(".pojOne").click(function(){
		$(this).animate({
			"left":"600px"
		},4000);
	});
});

Przykład wykorzystania funkcji animate() z modyfikacją przędności wykonywania

Warto wspomnieć, że także i tutaj czas animacji może być wyrażony poprzez predefiniowane wartości: slow i fast.

Oczywiście w ramach jednej animacji możemy zmienić więcej niż jeden parametr składowy, odpowiadający właściwości CSS. Na przykład chcemy by poprzedni przykład dodatkowo zwężał się do 150px.

 $(function(){
	$(".pojOne").click(function(){
		$(this).animate({
			"left":"600px",
			"height":"150px"
		},4000);
	});
});

Należy jednak pamiętać, że wszystkie parametry CSS-owe muszą być numeryczne, czyli animować się będą parametry left czy height, ale background-color już nie. Dodatkowo wartości są domyślnie traktowane jako wyrażone w pixelach, lecz dozwolone jest używanie em i %.

Dodatkowo ciekawym zabiegiem jest umożliwienie podania jako wartość właściwości wartości predefiniowanych, takich jak: ‘toggle’, ‘show’ i ‘hide’, które umożliwiają manipulowanie widocznością elementu:

 $(function(){
	$(".pojOne").click(function(){
		$(this).animate({
			height: 'toggle'
		},4000);
	});
});

Jak widać animacje z wykorzystaniem biblioteki jQuery są naprawdę proste i gorąco zachęcam do eksperymentowania. W kolejnej częsci kursu opowiem trochę więcej o selektorach wykorzystywanych w jQuery. I na koniec jeszcze…

Przykład łączenia animacji w jQuery (kliknij jeszcze raz w obszar po skończonej animacji )

Przyjemnego animowania

Zapisz się na RSS by dowiadywać się o nowościach w serwisie!