Die animate-metode

Die animate metode laat jou toe om animasie-effekte vir verskeie CSS-eienskappe te skep. Die enigste verpligte parameter is 'n objek met CSS-eienskappe, soortgelyk aan dié wat ons oordra na die css metode. Baie eienskappe met nie-numeriese waardes of verskeie waardes kan nie geanimeer word deur jQuery se basiese funksionaliteit nie (bv. background-color). Ook word verkorte name van CSS-eienskappe nie altyd ondersteun nie, byvoorbeeld font - in plaas daarvan moet jy fontSize of font-size gebruik. Voor waardes kan jy '+=' of '-=' plaas, in sulke geval sal die waarde wat gespesifiseer word bygetel of afgetrek word van die huidige waarde van die eienskap. Ook in plaas van numeriese waardes kan jy show, hide of toggle plaas. Alle jQuery effekte, insluitend animate, kan globaal gedeaktiveer word deur die instelling jQuery.fx.off = true te gebruik, wat die duurwaarde op 0 stel.

Sintaksis

Die eerste parameter van animasie is 'n objek met CSS-eienskappe en hul waardes in die formaat sleutel: waarde, wat ons gaan animeer. Die ander parameters word beskou as opsiesioneel. Die tweede parameter - bepaal die duur van die animasie in millisekondes, 400ms verstek. Die derde parameter is die gemaksfunksie vir die oorgang (verstek is swing), en die vierde - 'n callback-funksie, wat uitgevoer word na voltooiing van die animasie:

.animate(eienskappe, [duur ], [gemaksfunksie ], [callback-funksie ]);

Tyd kan nie net in millisekondes gestel word nie, maar ook met sleutelwoorde slow (600ms) en fast (200ms), hoe groter die waarde, hoe stadiger die animasie. Jy kan die tweede parameter gebruik om verskeie opsies aan die metode oor te dra, in die vorm van 'n JavaScript objek, wat pare sleutel: waarde bevat:

.animate(eienskappe, opsies);

Byvoorbeeld, laat ons die CSS-eienskappe width en height die waarde toggle gee. Duur op 5000ms, ons sal die gemaksfunksies as 'n objek oordra, vir breedte sal dit 'n lineêre funksie wees, en vir hoogte - easeOutBounce, ook na voltooiing van die animasie sal ons funksie een keer uitgevoer word (sien die sleutel complete), wat na die element met #test 'n div met die inskripsie 'Animation complete.' sal plaas:

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

Hieronder in die tabel word die eienskappe en metodes van die objek options en hul beskrywing gegee:

Naam	Beskrywing
`duration`	Duur van animasie in millisekondes - string of getal. `400ms` verstek.
`easing`	Bepaal watter gemaksfunksie om te gebruik. `swing` verstek.
`queue`	Booleaanse waarde of string. `true` verstek. Dui aan - om die animasie in die ry te plaas. Met waarde `false` sal die animasie onmiddellik begin. As die parameter as string oorgedra word, sal die animasie in die ry geplaas word, wat deur hierdie parameter verteenwoordig word. Wanneer 'n ry met 'n pasgemaakte naam gebruik word, sal die animasie nie outomaties begin nie, om dit te begin - gebruik `dequeue('queuename')`.
`specialEasing`	Hier kan jy 'n objek oordra, waar sleutels CSS-eienskappe is, en waardes - die ooreenstemmende gemaksfunksies.
`step`	'n Funksie wat vir elke geanimeerde eienskap van elke geanimeerde element geroep word. Dit laat toe om die `Tween` objek te modifiseer om die waarde van die eienskap te verander voordat dit gestel word. As parameters aanvaar dit die huidige waarde van `tween` en die `Tween` objek.
`progress`	'n Funksie wat na elke stap van die animasie geroep word, slegs een keer per element ongeag die aantal geanimeerde eienskappe. Die funksie aanvaar drie parameters `animation` (as 'n belofte), `progress` ('n getal van `0` tot `1`) en `remainingMs` ('n getal oorblywende millisekondes).
`complete`	'n Funksie wat een keer na die einde van die animasie van die element geroep word. Die funksie aanvaar `animation` (as 'n belofte).
`start`	'n Funksie wat geroep word wanneer die animasie van die element begin. Die funksie aanvaar `animation` (as 'n belofte) en `jumpedToEnd` ('n Booleaanse waarde. As `true`, dan word die animasie outomaties voltooi).
`done`	'n Funksie wat geroep word wanneer die animasie van die element eindig (sy belofte suksesvol voltooi is). Die funksie aanvaar `animation` (as 'n belofte) en `jumpedToEnd` ('n Booleaanse waarde. As `true`, dan word die animasie outomaties voltooi).
`fail`	'n Funksie wat geroep word wanneer die animasie van die element met 'n fout eindig (sy belofte met 'n fout voltooi is). Die funksie aanvaar `animation` (as 'n belofte) en `jumpedToEnd` ('n Booleaanse waarde. As `true`, dan word die animasie outomaties voltooi).
`always`	'n Funksie wat geroep word wanneer die animasie van die element voltooi of gestop word sonder voltooiing (sy belofte suksesvol of met 'n fout voltooi is). Die funksie aanvaar `animation` (as 'n belofte) en `jumpedToEnd` ('n Booleaanse waarde. As `true`, dan word die animasie outomaties voltooi).

Voorbeeld

Kom ons skuif, wanneer op die knoppie #left gedruk word, die groen vierkant na links, en op die knoppie #right na regs met 50px, ons sal ook die duur op 600ms stel - met die opdrag slow:

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

Sien ook

die metode show,
wat elemente glad wys
die metode stop,
wat toelaat om 'n begin animasie te stop
die metode delay,
wat 'n vertraging in die uitvoering van gebeure stel
die eienskap jQuery.fx.off,
wat toelaat om animasie globaal af te skakel
die selektor animated,
wat elemente kies wat tans by animasie betrokke is