animate-metoden

Metoden animate lar deg opprette animasjonseffekter for ulike CSS-egenskaper. Den eneste obligatoriske parameteren er et objekt med CSS-egenskaper, likt det vi sender til metoden css. Mange egenskaper som har ikke-numeriske verdier eller flere verdier kan ikke animeres med jQuerys grunnleggende funksjonalitet (for eksempel background-color). Også forkortede CSS-egenskapsnavn støttes ikke alltid, for eksempel font - i stedet må du bruke fontSize eller font-size. Foran verdier kan du sette '+=' eller '-=', i så fall vil den angitte verdien bli lagt til eller trukket fra egenskapens nåværende verdi. I stedet for numeriske verdier kan du også sette show, hide eller toggle. Alle jQuery-effekter, inkludert animate, kan slås av globalt ved å bruke innstillingen jQuery.fx.off = true, som setter varighetsverdien til 0.

Syntaks

Den første parameteren til animasjonen er et objekt med CSS-egenskaper og deres verdier i formatet nøkkel: verdi, som vi skal animere. De resterende parameterne regnes som valgfrie. Den andre parameteren - angir animasjonens varighet i millisekunder, 400ms som standard. Den tredje parameteren er easing-funksjonen for overgangen (standard er swing), og den fjerde - en callback-funksjon som vil kjøre etter at animasjonen er fullført:

.animate(egenskaper, [varighet ], [easing-funksjon ], [callback-funksjon ]);

Tid kan angis ikke bare i millisekunder, men også med nøkkelord slow (600ms) og fast (200ms), jo høyere verdi, jo tregere animasjon. Du kan sende ulike alternativer til metoden som den andre parameteren, i form av et JavaScript-objekt som inneholder par med nøkkel: verdi:

.animate(egenskaper, alternativer);

For eksempel, la oss sette CSS-egenskapene width og height til verdien toggle. Varigheten til 5000ms, vi sender easing-funksjonene som et objekt, for bredden vil det være en lineær funksjon, og for høyden - easeOutBounce, også etter animasjonen er fullført, vil funksjonen kjøre én gang (se nøkkelen complete), som etter elementet med #test vil plassere en div med teksten 'Animation complete.':

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

Nedenfor i tabellen er egenskapene og metodene for objektet options og deres beskrivelse vist:

Navn	Beskrivelse
`duration`	Animasjonens varighet i millisekunder - streng eller tall. `400ms` som standard.
`easing`	Angir hvilken easing-funksjon som skal brukes. `swing` som standard.
`queue`	Boolsk verdi eller streng. `true` som standard. Angir om animasjonen skal legges i kø. Med verdien `false` starter animasjonen umiddelbart. Hvis parameteren sendes som en streng, vil animasjonen bli satt i køen representert av denne parameteren. Ved bruk av kø med et egendefinert navn, starter ikke animasjonen automatisk, for å starte den - bruk `dequeue('kønavn')`.
`specialEasing`	Her kan du sende et objekt der nøklene er CSS-egenskaper, og verdiene - deres tilsvarende easing-funksjoner.
`step`	En funksjon som kalles for hver animerte egenskap for hvert animerte element. Den lar deg modifisere `Tween`-objektet for å endre verdien på egenskapen før den settes. Den tar den nåværende verdien av `tween` og `Tween`-objektet som parametere.
`progress`	Funksjon som kalles etter hvert animasjonstrinn, bare én gang per element uavhengig av antall animerte egenskaper. Funksjonen tar tre parametere `animation` (som et promise), `progress` (tall fra `0` til `1`) og `remainingMs` (antall gjenværende millisekunder).
`complete`	Funksjon som kalles én gang etter at animasjonen av elementet er avsluttet. Funksjonen tar `animation` (som et promise).
`start`	Funksjon som kalles når animasjonen av elementet starter. Funksjonen tar `animation` (som et promise) og `jumpedToEnd` (Boolsk verdi. Hvis `true`, fullføres animasjonen automatisk).
`done`	Funksjon som kalles når animasjonen av elementet avsluttes (dens promise er oppfylt vellykket). Funksjonen tar `animation` (som et promise) og `jumpedToEnd` (Boolsk verdi. Hvis `true`, fullføres animasjonen automatisk).
`fail`	Funksjon som kalles når animasjonen av elementet avsluttes med feil (dens promise er avvist). Funksjonen tar `animation` (som et promise) og `jumpedToEnd` (Boolsk verdi. Hvis `true`, fullføres animasjonen automatisk).
`always`	Funksjon som kalles når animasjonen av elementet fullføres eller stoppes uten å fullføres (dens promise er oppfylt vellykket eller avvist). Funksjonen tar `animation` (som et promise) og `jumpedToEnd` (Boolsk verdi. Hvis `true`, fullføres animasjonen automatisk).

Eksempel

La oss ved klikk på knappen #left, flytte den grønne firkanten til venstre, og på knappen #right til høyre med 50px, også setter vi varigheten til 600ms - med kommandoen slow:

<button id="left">venstre</button>
<button id="right">høyre</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');
});

Se også

metoden show,
som jevnt viser elementer
metoden stop,
som lar deg stoppe en påbegynt animasjon
metoden delay,
som setter forsinkelse i utførelsen av hendelser
egenskapen jQuery.fx.off,
som lar deg slå av animasjon globalt
selektoren animated,
som velger elementer som for øyeblikket er involvert i animasjon