Metoda animate

Metoda animate pozwala tworzyć efekty animacyjne dla różnych właściwości CSS. Jedynym obowiązkowym parametrem jest obiekt z właściwościami CSS, podobny do tego, który przekazujemy do metody css. Wiele właściwości, które mają nieliczbowe wartości lub kilka wartości, nie może być animowanych za pomocą podstawowej funkcjonalności jQuery (na przykład background-color). Również nie zawsze są obsługiwane skrócone nazwy właściwości CSS, na przykład font - zamiast tego należy użyć fontSize lub font-size. Przed wartościami można postawić '+=' lub '-=', w takim przypadku określona dalej wartość zostanie dodana lub odjęta od bieżącej wartości właściwości. Również zamiast liczbowych wartości można postawić show, hide lub toggle. Wszystkie efekty jQuery, w tym animate, można wyłączyć globalnie, używając ustawienia jQuery.fx.off = true, które ustawia wartość czasu trwania na 0.

Składnia

Pierwszym parametrem animacji jest obiekt z właściwościami CSS i ich wartościami w formacie klucz: wartość, które zamierzamy animować. Pozostałe parametry są uważane za opcjonalne. Drugi parametr określa czas trwania animacji w milisekundach, 400ms domyślnie. Trzecim parametrem jest funkcja wygładzania dla przejścia (domyślnie jest to swing), a czwartym - funkcja callback, która uruchomi się po wykonaniu animacji:

.animate(właściwości, [czas trwania ], [funkcja wygładzania ], [funkcja callback ]);

Czas można podawać nie tylko w milisekundach, ale także słowami kluczowymi slow (600ms) i fast (200ms), im większa wartość, tym wolniejsza animacja. Można jako drugi parametr przekazać metodzie różne opcje, w postaci obiektu JavaScript, zawierającego pary klucz: wartość:

.animate(właściwości, opcje);

Na przykład, ustawmy dla właściwości CSS width i height wartość toggle. Czas trwania na 5000ms, funkcjom wygładzania przekażemy w postaci obiektu, dla szerokości będzie to funkcja liniowa, a dla wysokości - easeOutBounce, również po zakończeniu animacji wykona się raz funkcja (patrz klucz complete), która po elemencie z #test umieści div z napisem 'Animation complete.':

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Animation complete.</div>');
	}
});

Poniżej w tabeli przedstawiono właściwości i metody obiektu options i ich opis:

Nazwa	Opis
`duration`	Czas trwania animacji w milisekundach - ciąg znaków lub liczba. `400ms` domyślnie.
`easing`	Określa, jakiej funkcji wygładzania użyć. `swing` domyślnie.
`queue`	Wartość logiczna lub ciąg znaków. `true` domyślnie. Wskazuje - umieścić czy animację w kolejce. Przy wartości `false` animacja rozpocznie się natychmiast. Jeśli parametr przekazany jest jako ciąg znaków, to animacja zostanie umieszczona w kolejce, reprezentowanej przez ten parametr. Przy użyciu kolejki z niestandardową nazwą, animacja nie uruchomi się automatycznie, aby ją uruchomić - użyj `dequeue('queuename')`.
`specialEasing`	Tutaj możesz przekazać obiekt, w którym kluczami będą właściwości CSS, a wartościami - odpowiadające im funkcje wygładzania.
`step`	Funkcja, która jest wywoływana dla każdej animowanej właściwości każdego animowanego elementu. Pozwala ona modyfikować obiekt `Tween`, aby zmienić wartość właściwości zanim zostanie ona ustawiona. Jako parametry przyjmuje bieżącą wartość `tween` i obiekt `Tween`.
`progress`	Funkcja wywoływana po każdym kroku animacji, tylko jeden raz dla każdego elementu, niezależnie od liczby animowanych właściwości. Funkcja przyjmuje trzy parametry `animation` (w postaci promisa), `progress` (liczba od `0` do `1`) i `remainingMs` (liczba pozostałych milisekund).
`complete`	Funkcja wywoływana raz po zakończeniu animacji elementu. Funkcja przyjmuje `animation` (w postaci promisa).
`start`	Funkcja, która jest wywoływana, gdy animacja elementu się zaczyna. Funkcja przyjmuje `animation` (w postaci promisa) i `jumpedToEnd` (Wartość logiczna. Jeśli `true`, to animacja automatycznie się kończy).
`done`	Funkcja, która jest wywoływana, gdy animacja elementu kończy się (jej promis jest wykonany pomyślnie). Funkcja przyjmuje `animation` (w postaci promisa) i `jumpedToEnd` (Wartość logiczna. Jeśli `true`, to animacja automatycznie się kończy).
`fail`	Funkcja, która jest wywoływana, gdy animacja elementu kończy się błędem (jej promis jest wykonany z błędem). Funkcja przyjmuje `animation` (w postaci promisa) i `jumpedToEnd` (Wartość logiczna. Jeśli `true`, to animacja automatycznie się kończy).
`always`	Funkcja, która jest wywoływana, gdy animacja elementu zostanie zakończona lub zatrzymana bez zakończenia (jej promis jest wykonany pomyślnie lub z błędem). Funkcja przyjmuje `animation` (w postaci promisa) i `jumpedToEnd` (Wartość logiczna. Jeśli `true`, to animacja automatycznie się kończy).

Przykład

Sprawmy, aby po naciśnięciu przycisku #left, zielony kwadrat przesunął się w lewo, a po naciśnięciu przycisku #right w prawo o 50px, również ustawmy czas trwania na 600ms - komendą slow:

<button id="left">left</button>
<button id="right">right</button>
<div class="block"></div>

div {
	position: absolute;
	background-color: green;
	left: 50px;
	width: 100px;
	height: 100px;
	margin: 5px;
}

$('#right').click(function() {
	$('.block').animate({'left': '+=50px'}, 'slow');
});
	
$('#left').click(function() {
	$('.block').animate({'left': '-=50px'}, 'slow');
});

Zobacz też

metoda show,
która płynnie pokazuje elementy
metoda stop,
która pozwala zatrzymać uruchomioną animację
metoda delay,
która ustawia opóźnienie wykonania zdarzeń
właściwość jQuery.fx.off,
która pozwala globalnie wyłączyć animację
selektor animated,
który wybiera elementy, które w danej chwili są zaangażowane w animację