jQuery
jQuery .animate () Methode
Zoeken…
Syntaxis
- (Selector) .animate ({stijlen}, {opties})
parameters
| Parameter | Details |
|---|---|
| eigendommen | Een object met CSS-eigenschappen en -waarden waarnaar de animatie wordt verplaatst |
| looptijd | (standaard: 400) Een tekenreeks of nummer dat bepaalt hoe lang de animatie wordt uitgevoerd |
| versoepeling | (standaard: swing) Een tekenreeks die aangeeft welke versnellingsfunctie moet worden gebruikt voor de overgang |
| compleet | Een functie die wordt aangeroepen zodra de animatie is voltooid, eenmaal aangeroepen per gekoppeld element. |
| begin | specificeert een functie die moet worden uitgevoerd wanneer de animatie begint. |
| stap | specificeert een functie die moet worden uitgevoerd voor elke stap in de animatie. |
| wachtrij | een Booleaanse waarde die aangeeft of de animatie al dan niet in de effectenwachtrij moet worden geplaatst. |
| vooruitgang | specificeert een functie die moet worden uitgevoerd na elke stap in de animatie. |
| gedaan | specificeert een functie die moet worden uitgevoerd wanneer de animatie eindigt. |
| fail | geeft een functie aan die moet worden uitgevoerd als de animatie niet wordt voltooid. |
| specialEasing | een kaart van een of meer CSS-eigenschappen van de parameter stijlen, en hun bijbehorende versnellingsfuncties. |
| altijd | specificeert een functie die moet worden uitgevoerd als de animatie stopt zonder te worden voltooid. |
Animatie met terugbelactie
Soms moeten we de positie van woorden van de ene plaats naar de andere veranderen of de grootte van de woorden verkleinen en de kleur van woorden automatisch wijzigen om de aantrekkingskracht van onze website of web-apps te verbeteren. JQuery helpt veel met dit concept met behulp van fadeIn(), hide(), slideDown() maar de functionaliteit ervan is beperkt en het heeft alleen de specifieke taak uitgevoerd die eraan is toegewezen.
Jquery .animate() dit probleem op door een verbazingwekkende en flexibele methode te bieden die .animate() . Met deze methode kunt u aangepaste animaties instellen die worden gebruikt in css-eigenschappen die toestemming geven om over grenzen te vliegen. bijvoorbeeld als we de eigenschap css style als width:200; en de huidige positie van het DOM-element is 50, animeert de methode de huidige positiewaarde van de gegeven CSS-waarde en animeert dat element naar 150, maar we hoeven ons geen zorgen te maken over dit onderdeel, omdat de animatie-engine het afhandelt.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#btn1").click(function(){
$("#box").animate({width: "200px"});
});
</script>
<button id="btn1">Animate Width</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
Lijst met css- .animate() methode .animate() toestaan.
backgroundPositionX, backgroundPositionY, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderSpacing, margin, marginBottom, marginLeft, marginRight, marginTop, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, height, width, maxHeight, maxWidth, minHeight, minWidth, fontSize, bottom, left, right, top, letterSpacing, wordSpacing, lineHeight, textIndent,
Snelheid opgegeven in methode .animate() .
milliseconds (Ex: 100, 1000, 5000, etc.),
"slow",
"fast"
.animate() gespecificeerd in .animate() methode.
| "schommel" |
| "lineair" |
Hier zijn enkele voorbeelden met complexe animatie-opties.
Bijv. 1:
$( "#book" ).animate({
width: [ "toggle", "swing" ],
height: [ "toggle", "swing" ],
opacity: "toggle"
}, 5000, "linear", function() {
$( this ).after( "<div>Animation complete.</div>" );
});
Bijv. 2:
$("#box").animate({
height: "300px",
width: "300px"
}, {
duration: 5000,
easing: "linear",
complete: function(){
$(this).after("<p>Animation is complete!</p>");
}
});