jQuery-effecten - Animatie
Met jQuery kunt u aangepaste animaties maken.
jQuery-animaties - De animate()-methode
De jQuery animate()-methode wordt gebruikt om aangepaste animaties te maken.
Syntaxis:
$(selector).animate({params},speed,callback);
De vereiste params-parameter definieert de CSS-eigenschappen die moeten worden geanimeerd.
De optionele snelheidsparameter specificeert de duur van het effect. Het kan de volgende waarden aannemen: "slow", "fast" of milliseconden.
De optionele callback-parameter is een functie die moet worden uitgevoerd nadat de animatie is voltooid.
Het volgende voorbeeld demonstreert een eenvoudig gebruik van de animate()methode; het verplaatst een <div>-element naar rechts, totdat het een linkereigenschap van 250px heeft bereikt:
Voorbeeld
$("button").click(function(){
$("div").animate({left: '250px'});
});
Standaard hebben alle HTML-elementen een statische positie en kunnen ze niet worden verplaatst.
Om de positie te manipuleren, vergeet niet om eerst de CSS position-eigenschap van het element in te stellen op relatief, vast of absoluut!
jQuery animate() - Meerdere eigenschappen manipuleren
Merk op dat meerdere eigenschappen tegelijkertijd kunnen worden geanimeerd:
Voorbeeld
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Is het mogelijk om ALLE CSS-eigenschappen te manipuleren met de animate()-methode?
Ja bijna! Er is echter één belangrijk ding om te onthouden: alle eigenschapsnamen moeten camel-cased zijn wanneer ze worden gebruikt met de animate()-methode: u moet paddingLeft schrijven in plaats van padding-left, marginRight in plaats van margin-right, enzovoort.
Ook is kleurenanimatie niet opgenomen in de kern jQuery-bibliotheek.
Als u kleuren wilt animeren, moet u de
plug-in Color Animations downloaden van jQuery.com.
jQuery animate() - Relatieve waarden gebruiken
Het is ook mogelijk om relatieve waarden te definiëren (de waarde is dan relatief aan de huidige waarde van het element). Dit doe je door += of -= voor de waarde te zetten:
Voorbeeld
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate() - Vooraf gedefinieerde waarden gebruiken
U kunt zelfs de animatiewaarde van een eigenschap specificeren als " show", " hide" of " toggle":
Voorbeeld
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
jQuery animate() - Gebruikt wachtrijfunctionaliteit
Standaard wordt jQuery geleverd met wachtrijfunctionaliteit voor animaties.
Dit betekent dat als je meerdere animate()aanroepen achter elkaar schrijft, jQuery een "interne" wachtrij maakt met deze methodeaanroepen. Vervolgens voert het de geanimeerde oproepen EEN voor EEN uit.
Dus als je verschillende animaties achter elkaar wilt uitvoeren, maken we gebruik van de wachtrijfunctionaliteit:
voorbeeld 1
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
Het onderstaande voorbeeld verplaatst het <div>element eerst naar rechts en vergroot vervolgens de lettergrootte van de tekst:
Voorbeeld 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
jQuery-oefeningen
jQuery Effecten Referentie
Ga voor een compleet overzicht van alle jQuery-effecten naar onze jQuery-effectreferentie .