Metoda animate

Metoda animate permite crearea efectelor de animație pentru diverse proprietăți CSS. Singurul parametru obligatoriu - este obiectul cu proprietățile CSS, similar cu cel pe care îl transmitem metodei css. Multe proprietăți care au valori non-numerice sau mai multe valori nu pot fi animate cu funcționalitatea de bază jQuery (de exemplu background-color). De asemenea, nu întotdeauna sunt acceptate denumirile prescurtate ale proprietăților CSS, de exemplu font - în loc de aceasta trebuie utilizat fontSize sau font-size. Înaintea valorilor se poate pune '+=' sau '-=', în acest caz valoarea specificată ulterior va fi adăugată sau scăzută din valoarea curentă a proprietății. De asemenea, în loc de valori numerice se poate pune show, hide sau toggle. Toate efectele jQuery, inclusiv animate, pot fi dezactivate global, utilizând setarea jQuery.fx.off = true, care stabilește valoarea duratei la 0.

Sintaxă

Primul parametru al animației este obiectul cu proprietățile CSS și valorile acestora în formatul cheie: valoare, pe care intenționăm să le animăm. Restul parametrilor sunt considerați opționali. Al doilea parametru - determină durata animației în milisecunde, 400ms implicit. Al treilea parametru funcția de easing pentru tranziție (implicit este swing), și al patrulea - funcția callback, care se va executa după finalizarea animației:

.animate(proprietăți, [durată ], [funcția de easing ], [funcția callback ]);

Timpul poate fi setat nu doar în milisecunde, ci și prin cuvintele cheie slow (600ms) și fast (200ms), cu cât valoarea este mai mare, cu atât animația este mai lentă. Se poate transmite metodei ca al doilea parametru diverse opțiuni, sub formă de obiect JavaScript, conținând perechi cheie: valoare:

.animate(proprietăți, opțiuni);

De exemplu, să setăm pentru proprietățile CSS width și height valoarea toggle. Durata la 5000ms, funcțiile de easing le vom transmite sub formă de obiect, pentru lățime aceasta va fi funcția liniară, iar pentru înălțime - easeOutBounce, de asemenea la finalizarea animației se va executa o dată funcția (vezi cheia complete), care după elementul cu #test va plasa un div cu inscripția 'Animation complete.':

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

Mai jos în tabel sunt prezentate proprietățile și metodele obiectului options și descrierea acestora:

Denumire	Descriere
`duration`	Durata animației în milisecunde - șir de caractere sau număr. `400ms` implicit.
`easing`	Determină ce funcție de easing să utilizeze. `swing` implicit.
`queue`	Valoare booleană sau șir de caractere. `true` implicit. Indică - să pună animația în coadă. La valoarea `false` animația va începe imediat. Dacă parametrul este transmis ca șir de caractere, atunci animația va fi pusă în coada, reprezentată de acest parametru. La utilizarea unei cozi cu denumire personalizată, animația nu va porni automat, pentru a o porni - utilizați `dequeue('queuename')`.
`specialEasing`	Aici puteți transmite un obiect, în care cheile vor fi proprietăți CSS, iar valorile - funcțiile de easing corespunzătoare acestora.
`step`	Funcție, care este apelată pentru fiecare proprietate animată a fiecărui element animat. Ea permite modificarea obiectului `Tween`, pentru a modifica valoarea proprietății înainte ca aceasta să fie setată. Ca parametri acceptă valoarea curentă `tween` și obiectul `Tween`.
`progress`	Funcție, apelată după fiecare pas al animației, doar o dată pentru fiecare element independent de numărul de proprietăți animate. Funcția acceptă trei parametri `animation` (sub formă de promisiune), `progress` (număr de la `0` la `1`) și `remainingMs` (numărul de milisecunde rămase).
`complete`	Funcție, apelată o dată după finalizarea animației elementului. Funcția acceptă `animation` (sub formă de promisiune).
`start`	Funcție, care este apelată, când animația elementului începe. Funcția acceptă `animation` (sub formă de promisiune) și `jumpedToEnd` (Valoare booleană. Dacă `true`, atunci animația se termină automat).
`done`	Funcție, care este apelată, când animația elementului se termină (promisiunea sa este îndeplinită cu succes). Funcția acceptă `animation` (sub formă de promisiune) și `jumpedToEnd` (Valoare booleană. Dacă `true`, atunci animația se termină automat).
`fail`	Funcție, care este apelată, când animația elementului se termină cu eroare (promisiunea sa este îndeplinită cu eroare). Funcția acceptă `animation` (sub formă de promisiune) și `jumpedToEnd` (Valoare booleană. Dacă `true`, atunci animația se termină automat).
`always`	Funcție, care este apelată, când animația elementului se termină sau este oprită fără finalizare (promisiunea sa este îndeplinită cu succes sau cu eroare). Funcția acceptă `animation` (sub formă de promisiune) și `jumpedToEnd` (Valoare booleană. Dacă `true`, atunci animația se termină automat).

Exemplu

Să la apăsarea butonului #left, să deplasăm pătratul verde spre stânga, iar la butonul #right spre dreapta cu 50px, de asemenea să setăm durata la 600ms - cu comanda slow:

<button id="left">stânga</button>
<button id="right">dreapta</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');
});

Vezi și

metoda show,
care afișează elementele cu efect de tranziție
metoda stop,
care permite oprirea animației pornite
metoda delay,
care stabilește întârzierea executării evenimentelor
proprietatea jQuery.fx.off,
care permite dezactivarea globală a animației
selectorul animated,
care selectează elementele, care în acest moment sunt implicate în animație