jQuery animate () este o metodă de împachetare, adică funcționează cu un set pre-selectat de elemente DOM înfășurate în jQuery. Metoda vă permite să aplicați efectele de animație dorite asupra elementelor din set. Implementarea celor de mai sus în practică este posibilă datorită prezenței unui set de proprietăți CSS și valorilor pe care aceste proprietăți le vor avea asupra finalizării executării animațiilor. Valorile intermediare pe care stilul le va avea după atingerea efectului dorit (controlate automat de motorul de animație) sunt determinate de durata efectului și de relaxarea funcției; aceste două opțiuni vor fi discutate mai jos.
Lista proprietăților CSS în curs de animație este limitată la cele care pot lua valori numerice. Valorile pot fi absolute (de exemplu 200) sau relative. Pentru valorile absolute, unitatea jQuery implicită este pixeli. De asemenea, putem folosi unități specifice: em, rem sau interes. Pentru a seta valoarea relativă, se folosesc prefixele + = sau - =; prefixele direcționează valoarea relativă țintă în direcția pozitivă sau negativă.
Parametrii și semnătura metodei animate ()
Metoda are două forme principale; majoritatea parametrilor folosiți sunt opțional (cuprins în paranteze pătrate).
- animați (proprietăți [, durata] [, relaxare] [, apel invers])
- animați (proprietăți [, opțiuni])
- proprietăți (Object): o listă de proprietăți css, care conține valorile atinse la sfârșitul animației.
- durata: durata efectului în milisecunde sau una dintre rândurile predefinite: "lent" (600ms), "normal" (400ms) sau "fast" (200ms). Valoarea implicită este "normală".
- relaxare: numele funcției de relaxare (care determină modificarea vitezei de animație) utilizat în tranziție. Valoarea implicită este "swing".
- callback (Funcție): Funcție executată după finalizarea animației pentru fiecare element animat.
- opțiuni: Un obiect care conține un set de proprietăți (opțiuni suplimentare) care vor fi transmise metodei. Sunt disponibile următoarele proprietăți:
- întotdeauna: o funcție care se numește atunci când animația se termină sau când animația se execută (dar nu se termină).
- complete: Funcția de execuție când animația se termină.
- done (functie): functia, numita atunci cand animatia se termina.
- durata (String | Number): descris mai sus.
- relaxare: descris mai sus.
- eșec (funcție): executat atunci când animația a eșuat.
- progres: Efectuat după fiecare pas de animație. Se numește o dată pentru fiecare element după executarea animației sale.
- coză (booleană): când animația trebuie plasată în coada de efecte (detaliile de mai jos), valoarea implicită este adevărată.
- specialEasing (obiect): un obiect a cărui parametri sunt proprietăți css, ale căror valori sunt funcțiile de tranziție
- start (funcția): executat atunci când animația începe să apară.
- step: O funcție numită pentru fiecare proprietate animată a fiecărui element animat.
Termenul de relaxare este folosit pentru a descrie metoda care controlează procesarea și stabilește rata de cadre a animației. Animația este executată succesiv dacă opțiunea de coadă este setată la true. și în paralel (fără coadă) - dacă este falsă.
Exemple de utilizare a metodei animate ()
Vom aplica această metodă în practică. Am observat că erorile pot apărea atunci când se execută animații complexe de comandă create de această metodă. Adică, pentru animații foarte complexe, această metodă ar trebui evitată.
Animație unică
Creați o singură animație este extrem de ușoară, doar un singur apel. De exemplu, trebuie să mutați un element dintr-o parte a blocului în celălalt. Pentru a ilustra această animație, creați două elemente div, una în interiorul celeilalte. Stilul este următorul: fundalul divului interior este roșu. cod:
Aplicați animate () și mutați pătratul mic dintr-o parte în alta:
Numai proprietatea stângă este animată. Durata de animație este o presetare lentă (600ms). intern
Rulați mai multe animații într-o buclă
Executarea unei serii de animații pe un singur element sau pe un set de elemente nu este mai dificilă decât crearea unui lanț animat (). Din nou, mutați pătratul mic; Se va deplasa de-a lungul perimetrului de clepsidră, situat în interiorul unui pătrat mare (mai degrabă decât un dreptunghi). Pentru a crea o demonstrație, utilizați următoarea marcaj:
Pentru .square-mici, utilizați codul anterior CCS din exemplul anterior. Stilul pieței exterioare:
Acum vom bifa animatia, adica o vom face astfel incat dupa animatie sa inceapa din nou. Pentru a face acest lucru, putem închide apelul a 4 funcții animate () în interiorul unei funcții, care, la rândul său, este numită în cadrul unei alte funcții. Adică, noi creăm o funcție care poate fi menționată. Apoi putem folosi funcția completă și reporniți animația după ultimul pas.
Rețineți că atunci când sunați animate () pentru a nu scrie aceiași parametri de mai multe ori, au fost utilizate opțiunile variabile. În plus, în ultima etapă, direcționăm funcția completă () folosind metoda jQuery extend ().
Mai multe funcții de apel invers
La fel ca în ultimul exemplu, am setat proprietățile de început, completare și progres prin parametrul opțiuni (al doilea parametru din al doilea formular). Scopul este să dezactivați butonul, făcând clic pe care începe animația atunci când animația este (deja) terminată. A doua sarcină este de a arăta procentul, care parte din performanța generală a animației a fost efectuată. Pentru acest exemplu, vom folosi prima demonstrație cu corecțiile necesare.
Pentru a face posibilă afișarea unui procent, creați un buton și un element (interval). Marcaj: