jQuery
jQuery .animate () Metod
Sök…
Syntax
- (Väljare) .animate ({stilar}, {alternativ})
parametrar
| Parameter | detaljer |
|---|---|
| egenskaper | Ett objekt med CSS-egenskaper och värden som animationen kommer att röra sig mot |
| varaktighet | (standard: 400) En sträng eller ett nummer som bestämmer hur länge animationen ska köras |
| easing | (standard: swing) En sträng som anger vilken lättnadsfunktion som ska användas för övergången |
| komplett | En funktion att ringa när animationen är klar, kallas en gång per matchat element. |
| Start | anger en funktion som ska köras när animeringen börjar. |
| steg | anger en funktion som ska köras för varje steg i animeringen. |
| kö | ett booleskt värde som anger om animationen ska placeras i effektskön eller inte. |
| framsteg | anger en funktion som ska köras efter varje steg i animeringen. |
| Gjort | anger en funktion som ska köras när animationen är slut. |
| misslyckas | anger en funktion som ska köras om animationen inte slutförs. |
| specialEasing | en karta över en eller flera CSS-egenskaper från stilarparametern och deras motsvarande lättnadsfunktioner. |
| alltid | anger en funktion som ska köras om animeringen stannar utan att slutföra. |
Animering med återuppringning
Ibland måste vi byta ordsposition från en plats till en annan eller minska storleken på orden och ändra ordfärgen automatiskt för att förbättra attraktionen på vår webbplats eller webbappar. JQuery hjälper mycket med detta koncept med att använda fadeIn(), hide(), slideDown() men dess funktionalitet är begränsad och den fadeIn(), hide(), slideDown() bara den specifika uppgift som tilldelas den.
Jquery fixar detta problem genom att tillhandahålla en fantastisk och flexibel metod som kallas. .animate() . Denna metod gör det möjligt att ställa in anpassade animationer som används css-egenskaper som ger tillstånd att flyga över gränser. till exempel om vi ger css-stilegenskap som width:200; och nuvarande position för DOM-elementet är 50, animera metoden minska det aktuella positionsvärdet från givet css-värde och animera det elementet till 150.Men vi behöver inte bry oss om den här delen eftersom animationsmotorn kommer att hantera det.
<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>
Lista över css-stilegenskaper som tillåter i. .animate() -metoden.
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,
Hastighet specificerad i .animate() .
milliseconds (Ex: 100, 1000, 5000, etc.),
"slow",
"fast"
Förenkling som anges i .animate() .
| "gunga" |
| "linjär" |
Här är några exempel med komplexa animeringsalternativ.
T.ex. 1:
$( "#book" ).animate({
width: [ "toggle", "swing" ],
height: [ "toggle", "swing" ],
opacity: "toggle"
}, 5000, "linear", function() {
$( this ).after( "<div>Animation complete.</div>" );
});
T.ex. 2:
$("#box").animate({
height: "300px",
width: "300px"
}, {
duration: 5000,
easing: "linear",
complete: function(){
$(this).after("<p>Animation is complete!</p>");
}
});