Metoden animate

Metoden animate låter dig skapa animeringseffekter för olika CSS-egenskaper. Den enda obligatoriska parametern är ett objekt med CSS-egenskaper, liknande det vi skickar till metoden css. Många egenskaper som har icke-numeriska värden eller flera värden kan inte animeras av jQuerys grundfunktionalitet (till exempel background-color). Förkortade namn på CSS-egenskaper stöds inte heller alltid, till exempel font - istället bör du använda fontSize eller font-size. Före värden kan du sätta '+=' eller '-=', i så fall kommer det angivna värdet att läggas till eller dras av från egenskapens nuvarande värde. Istället för numeriska värden kan du även sätta show, hide eller toggle. Alla jQuery-effekter, inklusive animate, kan stängas av globalt genom att använda inställningen jQuery.fx.off = true, vilket sätter värdet på varaktigheten till 0.

Syntax

Den första parametern för animationen är ett objekt med CSS-egenskaper och deras värden i formatet nyckel: värde, som vi tänker animera. De övriga parametrarna anses vara frivilliga. Den andra parametern - bestämmer animationens varaktighet i millisekunder, 400ms som standard. Den tredje parametern är en easing-funktion för övergången (standard är swing), och den fjärde - en callback-funktion som aktiveras efter att animationen är klar:

.animate(egenskaper, [varaktighet ], [easing-funktion ], [callback-funktion ]);

Tid kan anges inte bara i millisekunder, utan också med nyckelorden slow (600ms) och fast (200ms), ju högre värde, desto långsammare animation. Du kan skicka olika alternativ till metoden som en andra parameter, i form av ett JavaScript-objekt, innehållande par av nyckel: värde:

.animate(egenskaper, alternativ);

Till exempel, låt oss sätta CSS-egenskaperna width och height till värdet toggle. Varaktigheten till 5000ms, vi skickar easing-funktioner som ett objekt, för bredd blir det en linjär funktion, och för höjd - easeOutBounce, också när animationen är klar kommer en funktion att köras en gång (se nyckeln complete), som efter elementet med #test placerar en div med texten 'Animation complete.':

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

I tabellen nedan finns egenskaper och metoder för objektet options och deras beskrivning:

Namn	Beskrivning
`duration`	Animationens varaktighet i millisekunder - sträng eller nummer. `400ms` som standard.
`easing`	Bestämmer vilken easing-funktion som ska användas. `swing` som standard.
`queue`	Booleskt värde eller sträng. `true` som standard. Anger om animationen ska sättas i kö. Med värdet `false` startar animationen omedelbart. Om parametern skickas som en sträng, kommer animationen att sättas i kön som representeras av denna parameter. När en kö med ett anpassat namn används, startar inte animationen automatiskt, för att starta den - använd `dequeue('queuename')`.
`specialEasing`	Här kan du skicka ett objekt, där nycklarna är CSS-egenskaper, och värdena - deras motsvarande easing-funktioner.
`step`	En funktion som anropas för varje animerad egenskap för varje animerat element. Den låter dig modifiera `Tween`-objektet för att ändra värdet på egenskapen innan det sätts. Som parametrar tar det det aktuella värdet av `tween` och `Tween`-objektet.
`progress`	En funktion som anropas efter varje steg i animationen, bara en gång per element oavsett antal animerade egenskaper. Funktionen tar tre parametrar `animation` (som ett promise), `progress` (nummer från `0` till `1`) och `remainingMs` (antal återstående millisekunder).
`complete`	En funktion som anropas en gång efter avslutad animation av elementet. Funktionen tar `animation` (som ett promise).
`start`	En funktion som anropas när animationen av elementet börjar. Funktionen tar `animation` (som ett promise) och `jumpedToEnd` (Booleskt värde. Om `true`, så avslutas animationen automatiskt).
`done`	En funktion som anropas när animationen av elementet avslutas (dess promise uppfylldes framgångsrikt). Funktionen tar `animation` (som ett promise) och `jumpedToEnd` (Booleskt värde. Om `true`, så avslutas animationen automatiskt).
`fail`	En funktion som anropas när animationen av elementet avslutas med ett fel (dess promise uppfylldes med ett fel). Funktionen tar `animation` (som ett promise) och `jumpedToEnd` (Booleskt värde. Om `true`, så avslutas animationen automatiskt).
`always`	En funktion som anropas när animationen av elementet avslutas eller stoppas utan att slutföras (dess promise uppfylldes framgångsrikt eller med fel). Funktionen tar `animation` (som ett promise) och `jumpedToEnd` (Booleskt värde. Om `true`, så avslutas animationen automatiskt).

Exempel

Låt oss, när knappen #left trycks ned, flytta den gröna kvadraten åt vänster, och knappen #right åt höger med 50px, vi sätter också varaktigheten till 600ms - med kommandot slow:

<button id="left">vänster</button>
<button id="right">höger</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 även

metoden show,
som jämnt visar element
metoden stop,
som låter dig stoppa en påbörjad animation
metoden delay,
som sätter en fördröjning för utförande av händelser
egenskapen jQuery.fx.off,
som låter dig stänga av animation globalt
selektorn animated,
som väljer element som för tillfället är involverade i en animation