Metoden animate

Metoden animate giver mulighed for at skabe animations effekter for forskellige CSS-egenskaber. Den eneste obligatoriske parameter er et objekt med CSS-egenskaber, svarende til det, vi sender til metoden css. Mange egenskaber, der har ikke-numeriske værdier eller flere værdier, kan ikke animeres med jQuerys basisfunktionalitet (f.eks. background-color). Kort navngivning af CSS-egenskaber understøttes heller ikke altid, f.eks. font - i stedet skal man bruge fontSize eller font-size. Foran værdier kan man sætte '+=' eller '-=', i så fald vil den angivne værdi blive lagt til eller trækkes fra egenskabens nuværende værdi. I stedet for numeriske værdier kan man også sætte show, hide eller toggle. Alle jQuery-effekter, inklusive animate, kan deaktiveres globalt ved at bruge indstillingen jQuery.fx.off = true, hvilket sætter varigheden til 0.

Syntaks

Den første parameter for animationen er et objekt med CSS-egenskaber og deres værdier i formatet nøgle: værdi, som vi vil animere. De resterende parametre betragtes som valgfrie. Den anden parameter - bestemmer animationens varighed i millisekunder, 400ms som standard. Den tredje parameter er overgangsfunktionen (som standard er det swing), og den fjerde - en callback-funktion, som kører efter animationen er udført:

Tid kan angives ikke kun i millisekunder, men også med nøgleordene slow (600ms) og fast (200ms), jo højere værdi, desto langsommere animation. Man kan give metoden forskellige indstillinger som anden parameter, i form af et JavaScript-objekt, der indeholder par nøgle: værdi:

For eksempel, lad os sætte CSS-egenskaberne width og height til værdien toggle. Varigheden sat til 5000ms, vi sender overgangsfunktionerne som et objekt, for bredde vil det være en lineær funktion, og for højde - easeOutBounce, også efter afslutning af animationen udføres funktionen én gang (se nøglen complete), som efter elementet med #test placerer en div med teksten 'Animation complete.':

Nedenfor i tabellen er egenskaber og metoder for objektet options og deres beskrivelse vist:

Navn	Beskrivelse
duration	Animationens varighed i millisekunder - streng eller nummer. 400ms som standard.
easing	Bestemmer hvilken overgangsfunktion der skal bruges. swing som standard.
queue	Boolsk værdi eller streng. true som standard. Angiver - om animationen skal sættes i kø. Ved værdien false starter animationen øjeblikkeligt. Hvis parameteren overføres som en streng, bliver animationen sat i køen repræsenteret af denne parameter. Ved brug af kø med brugerdefineret navn, starter animationen ikke automatisk, for at starte den - brug dequeue('queuename').
specialEasing	Her kan du sende et objekt, hvor nøglerne er CSS-egenskaber, og værdierne - deres tilsvarende overgangsfunktioner.
step	Funktion, der kaldes for hver animeret egenskab for hvert animeret element. Den giver mulighed for at modificere Tween-objektet for at ændre værdien af egenskaben før den bliver sat. Som parametre tager den den nuværende værdi af tween og Tween-objektet.
progress	Funktion, der kaldes efter hvert trin i animationen, kun én gang per element uafhængigt af antallet af animerede egenskaber. Funktionen tager tre parametre animation (som et promise), progress (nummer fra 0 til 1) og remainingMs (antal tilbageværende millisekunder).
complete	Funktion, der kaldes én gang efter afslutningen af elementets animation. Funktionen tager animation (som et promise).
start	Funktion, der kaldes, når animationen af elementet begynder. Funktionen tager animation (som et promise) og jumpedToEnd (Boolsk værdi. Hvis true, så afsluttes animationen automatisk).
done	Funktion, der kaldes, når animationen af elementet slutter (dens promise opfyldt successfuldt). Funktionen tager animation (som et promise) og jumpedToEnd (Boolsk værdi. Hvis true, så afsluttes animationen automatisk).
fail	Funktion, der kaldes, når animationen af elementet slutter med en fejl (dens promise opfyldt med fejl). Funktionen tager animation (som et promise) og jumpedToEnd (Boolsk værdi. Hvis true, så afsluttes animationen automatisk).
always	Funktion, der kaldes, når animationen af elementet afsluttes eller stoppes uden at være færdig (dens promise opfyldt successfuldt eller med fejl). Funktionen tager animation (som et promise) og jumpedToEnd (Boolsk værdi. Hvis true, så afsluttes animationen automatisk).

Eksempel

Lad os ved klik på knappen #left, flytte den grønne firkant til venstre, og ved knappen #right til højre med 50px, også sætte varigheden til 600ms - med kommandoen slow:

Se også