Sök…


Syntax

  1. (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.
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>");
     }
  });


Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow