De animate methode

De methode animate maakt het mogelijk animatie-effecten te creëren voor verschillende CSS-eigenschappen. De enige verplichte parameter is een object met CSS-eigenschappen, vergelijkbaar met wat we doorgeven aan de methode css. Veel eigenschappen met niet-numerieke waarden of meerdere waarden kunnen niet worden geanimeerd door de basisfunctionaliteit van jQuery (bijvoorbeeld background-color). Ook worden niet altijd verkorte namen van CSS-eigenschappen ondersteund, bijvoorbeeld font - in plaats daarvan moet fontSize of font-size worden gebruikt. Voor waarden kan '+=' of '-=' worden geplaatst, in dat geval wordt de opgegeven waarde opgeteld of afgetrokken van de huidige waarde van de eigenschap. Ook kunnen in plaats van numerieke waarden show, hide of toggle worden geplaatst. Alle jQuery-effecten, inclusief animate, kunnen wereldwijd worden uitgeschakeld door de instelling jQuery.fx.off = true, die de duurwaarde op 0 zet.

Syntaxis

De eerste parameter van de animatie is een object met CSS-eigenschappen en hun waarden in het formaat sleutel: waarde, die we gaan animeren. De overige parameters worden beschouwd als optioneel. De tweede parameter bepaalt de animatieduur in milliseconden, 400ms standaard. De derde parameter is de easing-functie voor de overgang (standaard is dit swing), en de vierde - een callback-functie die wordt uitgevoerd na voltooiing van de animatie:

.animate(eigenschappen, [duur ], [easing-functie ], [callback-functie ]);

Tijd kan niet alleen in milliseconden worden opgegeven, maar ook met de trefwoorden slow (600ms) en fast (200ms), hoe groter de waarde, hoe langzamer de animatie. Je kunt als tweede parameter verschillende opties doorgeven aan de methode, in de vorm van een JavaScript-object, dat paren sleutel: waarde bevat:

.animate(eigenschappen, options);

Laten we bijvoorbeeld voor de CSS-eigenschappen width en height de waarde toggle instellen. De duur op 5000ms, we geven de easing-functies door als een object, voor breedte is dit een lineaire functie, en voor hoogte - easeOutBounce, ook zal na voltooiing van de animatie één keer een functie worden uitgevoerd (zie sleutel complete), die na het element met #test een div plaatst met de tekst 'Animation complete.':

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

In de onderstaande tabel worden de eigenschappen en methoden van het object options en hun beschrijving weergegeven:

Naam	Beschrijving
`duration`	De duur van de animatie in milliseconden - string of getal. Standaard `400ms`.
`easing`	Bepaalt welke easing-functie moet worden gebruikt. Standaard `swing`.
`queue`	Booleaanse waarde of string. Standaard `true`. Geeft aan of de animatie in de wachtrij moet worden geplaatst. Bij waarde `false` start de animatie onmiddellijk. Als de parameter als string wordt doorgegeven, wordt de animatie in de wachtrij geplaatst die door deze parameter wordt vertegenwoordigd. Bij gebruik van een wachtrij met een aangepaste naam, start de animatie niet automatisch, om deze te starten - gebruik `dequeue('queuename')`.
`specialEasing`	Hier kun je een object doorgeven, waarin de sleutels CSS-eigenschappen zijn, en de waarden - de bijbehorende easing-functies.
`step`	Een functie die wordt aangeroepen voor elke geanimeerde eigenschap van elk geanimeerd element. Het maakt het mogelijk om het `Tween` object te wijzigen om de waarde van de eigenschap aan te passen voordat deze wordt ingesteld. Als parameters accepteert het de huidige waarde van `tween` en het `Tween` object.
`progress`	Een functie die wordt aangeroepen na elke stap van de animatie, slechts één keer per element, ongeacht het aantal geanimeerde eigenschappen. De functie accepteert drie parameters: `animation` (als een promise), `progress` (een getal van `0` tot `1`) en `remainingMs` (het aantal resterende milliseconden).
`complete`	Een functie die één keer wordt aangeroepen na het beëindigen van de animatie van het element. De functie accepteert `animation` (als een promise).
`start`	Een functie die wordt aangeroepen wanneer de animatie van het element begint. De functie accepteert `animation` (als een promise) en `jumpedToEnd` (Booleaanse waarde. Als `true`, dan wordt de animatie automatisch voltooid).
`done`	Een functie die wordt aangeroepen wanneer de animatie van het element eindigt (zijn promise is succesvol voltooid). De functie accepteert `animation` (als een promise) en `jumpedToEnd` (Booleaanse waarde. Als `true`, dan wordt de animatie automatisch voltooid).
`fail`	Een functie die wordt aangeroepen wanneer de animatie van het element eindigt met een fout (zijn promise is mislukt). De functie accepteert `animation` (als een promise) en `jumpedToEnd` (Booleaanse waarde. Als `true`, dan wordt de animatie automatisch voltooid).
`always`	Een functie die wordt aangeroepen wanneer de animatie van het element voltooid of gestopt wordt zonder voltooiing (zijn promise is succesvol voltooid of mislukt). De functie accepteert `animation` (als een promise) en `jumpedToEnd` (Booleaanse waarde. Als `true`, dan wordt de animatie automatisch voltooid).

Voorbeeld

Laten we bij het klikken op knop #left, de groene blok naar links verschuiven, en bij knop #right naar rechts met 50px, ook stellen we de duur in op 600ms - met het commando slow:

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

Zie ook

methode show,
die elementen soepel weergeeft
methode stop,
die het mogelijk maakt een gestarte animatie te stoppen
methode delay,
die een vertraging instelt voor de uitvoering van gebeurtenissen
eigenschap jQuery.fx.off,
die het mogelijk maakt animatie wereldwijd uit te schakelen
selector animated,
die elementen selecteert die op dit moment betrokken zijn bij een animatie