Metoda animate

Metoda animate lejon krijimin e efekteve animuese për veti të ndryshme CSS. Parametri i vetëm i detyrueshëm - është një objekt me veti CSS, i ngjashëm me atë që i kalojmë metodës css. Shumë veti, që kanë vlera jo-numerike ose disa vlera nuk mund të animohen nga funksionaliteti bazë i jQuery (p.sh. background-color). Gjithashtu jo gjithmonë mbështeten emrat e shkurtuar të vetive CSS, për shembull font - në vend të kësaj duhet përdorur fontSize ose font-size. Para vlerave mund të vendoset '+=' ose '-=', në këtë rast vlera e specifikuar më pas do të shtohet ose do të zbritet nga vlera aktuale e vetisë. Gjithashtu në vend të vlerave numerike mund të vendoset show, hide ose toggle. Të gjitha efektet e jQuery, përfshirë animate, mund të çaktivizohen globalisht, duke përdorur konfigurimin jQuery.fx.off = true, që vendos vlerën e kohëzgjatjes në 0.

Sintaksa

Parametri i parë i animacionit i kalon një objekt me vetitë CSS dhe vlerat e tyre në formatin çelës: vlerë, që ne kemi ndërmend t'i animojmë. Parametrat e tjerë konsiderohen opsional. Parametri i dytë - përcakton kohëzgjatjen e animacionit në milisekonda, 400ms si parazgjedhje. Parametri i tretë funksionin e lëvizjes së qetë për tranzicionin (si parazgjedhje është swing), dhe i katërti - funksioni callback, i cili do të ekzekutohet pas përfundimit të animacionit:

.animate(veti, [kohëzgjatje ], [funksion lëvizjeje ], [funksion callback ]);

Kohën mund ta vendosni jo vetëm në milisekonda, por edhe me fjalë kyçe slow (600ms) dhe fast (200ms), sa më e madhe të jetë vlera, aq më i ngadalshëm është animacioni. Mund t'i kalohet metodës si parametër i dytë opsione të ndryshme, në formën e një objekti JavaScript, që përmban çifte çelës: vlerë:

.animate(veti, opsione);

Për shembull, le të vendosim për vetitë CSS width dhe height vlerën toggle. Kohëzgjatjen në 5000ms, funksionet e lëvizjes do t'ia kalojmë në formë objekti, për gjerësinë do të jetë funksion linear, ndërsa për lartësinë - easeOutBounce, gjithashtu pas përfundimit të animacionit do të ekzekutohet një herë funksioni (shih çelësin complete), i cili pas elementit me #test do të vendosë një div me shkrimin 'Animation complete.':

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

Më poshtë në tabelë janë paraqitur vetitë dhe metodat e objektit options dhe përshkrimi i tyre:

Emri	Përshkrimi
`duration`	Kohëzgjatja e animacionit në milisekonda - varg ose numër. `400ms` si parazgjedhje.
`easing`	Përcakton cilin funksion lëvizjeje të përdorë. `swing` si parazgjedhje.
`queue`	Vlerë boolean ose varg. `true` si parazgjedhje. Tregon - nëse ta vendosë animacionin në radhë. Me vlerën `false` animacioni do të fillojë menjëherë. Nëse parametri kalohet si varg, atëherë animacioni do të vendoset në radhën, të përfaqësuar nga ky parametër. Kur përdoret radhë me emër të personalizuar, animacioni nuk do të fillojë automatikisht, për ta nisur atë - përdorni `dequeue('queuename')`.
`specialEasing`	Këtu mund të kaloni një objekt, në të cilin çelësat do të jenë vetitë CSS, dhe vlerat - funksionet përkatëse të lëvizjes së qetë.
`step`	Funksion, i cili thirret për çdo veti të animuar të çdo elementi të animuar. Ai lejon modifikimin e objektit `Tween`, për të ndryshuar vlerën e vetisë përpara se të vendoset. Si parametra pranon vlerën aktuale `tween` dhe objektin `Tween`.
`progress`	Funksion, i cili thirret pas çdo hapi animacioni, vetëm një herë për çdo element pavarësisht nga numri i vetive të animuara. Funksioni pranon tre parametra `animation` (në formë premtimi), `progress` (numër nga `0` në `1`) dhe `remainingMs` (numri i milisekondave të mbetura).
`complete`	Funksion, i cili thirret një herë pas përfundimit të animacionit të elementit. Funksioni pranon `animation` (në formë premtimi).
`start`	Funksion, i cili thirret, kur animacioni i elementit fillon. Funksioni pranon `animation` (në formë premtimi) dhe `jumpedToEnd` (Vlerë Boolean. Nëse `true`, atëherë animacioni automatikisht përfundon).
`done`	Funksion, i cili thirret, kur animacioni i elementit përfundon (premtimi i tij është përmbushur me sukses). Funksioni pranon `animation` (në formë premtimi) dhe `jumpedToEnd` (Vlerë Boolean. Nëse `true`, atëherë animacioni automatikisht përfundon).
`fail`	Funksion, i cili thirret, kur animacioni i elementit përfundon me gabim (premtimi i tij është përmbushur me gabim). Funksioni pranon `animation` (në formë premtimi) dhe `jumpedToEnd` (Vlerë Boolean. Nëse `true`, atëherë animacioni automatikisht përfundon).
`always`	Funksion, i cili thirret, kur animacioni i elementit përfundon ose ndalet pa përfundim (premtimi i tij është përmbushur me sukses ose me gabim). Funksioni pranon `animation` (në formë premtimi) dhe `jumpedToEnd` (Vlerë Boolean. Nëse `true`, atëherë animacioni automatikisht përfundon).

Shembull

Le të bëjmë që me klikim në butonin #left, të zhvendoset katrori i gjelbër majtas, dhe në butonin #right djathtas për 50px, gjithashtu le të vendosim kohëzgjatjen në 600ms - me komandën slow:

<button id="left">majtas</button>
<button id="right">djathtas</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');
});

Shihni gjithashtu

metoda show,
e cila tregon në mënyrë të qetë elementet
metoda stop,
e cila lejon ndalimin e animacionit të filluar
metoda delay,
e cila vendos vonesën në ekzekutimin e ngjarjeve
vetia jQuery.fx.off,
e cila lejon çaktivizimin global të animacionit
selektori animated,
i cili zgjedh elementet, të cilat në këtë moment janë të përfshirë në animacion