Aangepaste easing en animatie-callbacks
Implementeer aangepaste easingfuncties om de snelheid en het verloop van animaties te regelen en gebruik callbacks om code precies uit te voeren wanneer animaties zijn voltooid of een stap uitvoeren.
Aangepaste easing en animatie-callbacks is een gratis jQuery Academy-les op CoddyKit. Dit is les 2 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject jQuery Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus jQuery Academy bevat in totaal 3 lessen.
Meer dan alleen een basissnelheid voor animaties
Bij animaties gaat het niet alleen om het verplaatsen van elementen, maar ook om de manier waarop ze bewegen. Versoepeling bepaalt de versnelling en vertraging van een animatie, zodat die er natuurlijker of dramatischer uitziet.
jQuery biedt twee ingebouwde opties voor versoepeling: 'linear' (constante snelheid) en 'swing' (langzaam begin, snel midden, langzaam einde). Maar wat als je meer nodig hebt?
De standaardversoepeling verkennen
Bekijk het verschil tussen de standaardopties voor versoepeling van jQuery:
'linear': de animatie beweegt van begin tot eind met een constante snelheid.'swing': dit is de standaardoptie. De animatie begint langzaam, versnelt in het midden en vertraagt aan het einde weer.
Beide opties zijn eenvoudig, maar vaak wil je meer controle over het gevoel van de animatie.
Aangepaste versoepeling met jQuery UI
Voor geavanceerdere versoepelingseffecten gebruiken we vaak plug-ins. Een populaire keuze is de component jQuery UI Easing.
Deze breidt het object $.easing van jQuery uit met veel nieuwe functies, zoals 'easeOutBounce', 'easeInOutQuad' en meer. Zo krijg je een uitgebreide bibliotheek met vooraf gedefinieerde bewegingscurves.
Om deze te gebruiken, moet je de jQuery UI-bibliotheek meestal opnemen in je project.
Cod voorbeeld: stuiteren met EaseOutBounce
Probeer een animatie met een aangepaste versoepelingsfunctie uit jQuery UI. Let op hoe het vak aan het einde stuitert in plaats van abrupt te stoppen. Dit effect wordt bereikt met 'easeOutBounce'.
(Opmerking: in dit voorbeeld wordt ervan uitgegaan dat de kern en effecten van jQuery UI zijn opgenomen.)
<!DOCTYPE html>
<html>
<head>
<title>Custom Easing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: #4CAF50;
position: relative;
left: 0;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="startAnim">Animate</button>
<script>
$(document).ready(function() {
$("#startAnim").click(function() {
$("#box").animate({
left: '250px'
}, 1500, 'easeOutBounce'); // Using a jQuery UI easing
});
});
</script>
</body>
</html>Animatie-callbacks begrijpen
Animaties zijn asynchroon. Dat betekent dat je code doorgaat terwijl de animatie wordt uitgevoerd. Wat als je iets na het voltooien van een animatie wilt doen?
De methode .animate() van jQuery accepteert een callbackfunctie. De meest gebruikte is de callback complete.
- De callback
completewordt één keer uitgevoerd wanneer de animatie op het geselecteerde element of de geselecteerde elementen volledig is voltooid. - Deze is ideaal om acties aan elkaar te koppelen of een bericht als "klaar" weer te geven.
Cod voorbeeld: de callback `complete`
Hier animeren we een vak en wijzigen we daarna de achtergrondkleur en tonen we een bericht, maar alleen nadat de animatie 100% is voltooid.
Zo blijven de weergave en de timing van volgende acties correct.
<!DOCTYPE html>
<html>
<head>
<title>Complete Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: #008CBA;
position: relative;
left: 0;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="startAnim">Animate</button>
<p id="message"></p>
<script>
$(document).ready(function() {
$("#startAnim").click(function() {
$("#box").animate({
left: '250px'
}, 1000, function() { // This is the complete callback
$(this).css("background-color", "#f44336");
$("#message").text("Animation complete! Color changed.");
});
});
});
</script>
</body>
</html>De callback `step`
Soms moet je een actie tijdens een animatie uitvoeren, en niet alleen aan het einde. Daarvoor gebruik je de callback step.
De callback step wordt bij elke stap van de animatie voor elke geanimeerde eigenschap uitgevoerd. Deze wordt voortdurend aangeroepen terwijl de animatie actief is.
De callback ontvangt argumenten zoals now (de huidige waarde van de eigenschap), fx (een object met animatiedetails) en tween (voor geavanceerdere controle).
Cod voorbeeld: de callback `step`
Gebruik de callback step om de huidige positie van ons geanimeerde vak weer te geven terwijl het beweegt.
Zo zie je hoe je realtime-updates kunt ophalen en op de voortgang van de animatie kunt reageren. We gebruiken hiervoor specifiek het argument now.
<!DOCTYPE html>
<html>
<head>
<title>Step Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: #FFC107;
position: relative;
left: 0;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="startAnim">Animate</button>
<p>Current Left Position: <span id="position">0px</span></p>
<script>
$(document).ready(function() {
$("#startAnim").click(function() {
$("#box").animate({
left: '250px'
}, {
duration: 1500,
step: function(now, fx) { // This is the step callback
$("#position").text(now.toFixed(0) + "px");
}
});
});
});
</script>
</body>
</html>Meerdere callbacks gebruiken
Je kunt de callbacks step en complete in dezelfde animatie gebruiken.
De methode animate() accepteert als tweede argument een optiesobject waarin je zowel duration en easing als callbackfuncties kunt definiëren.
Zo krijg je nauwkeurige controle: je volgt de voortgang tijdens de animatie en voert een laatste actie uit nadat deze is afgelopen.
Controle van callbacks
Welke callback van jQuery animate() is het meest geschikt om een voortgangsbalk voortdurend bij te werken terwijl een animatie wordt uitgevoerd?
Versoepeling en callbacks: samenvatting
Goed gedaan! Je hebt geleerd hoe je je jQuery-animaties kunt verbeteren:
- Aangepaste versoepeling: gebruik plug-ins zoals jQuery UI om dynamischere snelheidscurves toe te passen dan alleen 'linear' of 'swing'.
- Callback
complete: voer code precies uit wanneer een animatie is voltooid. - Callback
step: ontvang realtime-updates en voer tijdens de voortgang van een animatie herhaaldelijk acties uit.
Met deze hulpmiddelen krijg je veel fijnmazigere controle over de visuele beweging en interactieve timing van je webelementen.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 22
- Lessen
- 48
Veelgestelde vragen
Is de les “Aangepaste easing en animatie-callbacks” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad jQuery Academy, waaronder “Aangepaste easing en animatie-callbacks”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus jQuery Academy bevat in totaal 3 lessen.
Wat leer ik in “Aangepaste easing en animatie-callbacks”?
Implementeer aangepaste easingfuncties om de snelheid en het verloop van animaties te regelen en gebruik callbacks om code precies uit te voeren wanneer animaties zijn voltooid of een stap uitvoeren. Je oefent met jQuery Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met jQuery Academy te beginnen?
Ervaring vooraf is niet nodig. jQuery Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 3.
Hoe lang duurt de les “Aangepaste easing en animatie-callbacks”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over jQuery Academy?
Ja. Elke les over jQuery Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Animaties aan elkaar koppelen en in een wachtrij plaatsen
- Aangepaste easing en animatie-callbacks
- Geavanceerde toggle- en slide-effecten