O funcție numită în orice caz - fie la sfârșitul animației, fie când este anulată fără o schimbare. (Adăugat în versiunea: 1.8)
Metoda .animate () vă permite să creați un efect de animație asupra oricărei proprietăți element CSS numerice. Singurul parametru necesar este un obiect cu proprietăți CSS. Acest obiect este similar cu cel care este trecut la metoda .css (). cu excepția faptului că gama de proprietăți este mai limitată.
Proprietățile și valorile de animație
Toate proprietățile de animație trebuie animate cu o singură valoare numerică. Cu excepția celor menționate mai jos; cele mai multe proprietăți non-numerice pot fi animate folosind jQuery funcționale de bază (de exemplu, lățimea. înălțimea sau stânga poate fi animat culoare de fundal, dar nu se poate, cu excepția utilizării jQuery.Color dop). Valorile proprietăților sunt considerate ca fiind numărul de pixeli, dacă nu se specifică altfel. Unitățile de măsură em și% pot fi specificate, dacă este cazul.
În plus față de proprietățile de stil, unele proprietăți non-stil, cum ar fi scrollTop și scrollLeft. precum și proprietățile personalizate pot fi animate.
Proprietățile CSS reduse (cum ar fi font, fundal, frontieră) nu sunt pe deplin acceptate. De exemplu, dacă doriți să animați lățimea marginilor, stilul și lățimea originală a marginii trebuie specificate în prealabil. Sau, dacă doriți să animați dimensiunea fontului, trebuie să utilizați fontSize sau CSS echivalentul "font-size" și nu doar "font".
În plus față de valorile numerice, fiecare proprietate poate lua un șir: 'arată'. "ascunde" sau "comuta". Aceste abrevieri permit animații arbitrare de ascundere sau afișare care țin cont de tipul de afișare a elementelor. Pentru a utiliza urmărirea stării de proprietate încorporată, șirul "toggle" trebuie să fie specificat ca valoare a proprietății CSS animate.
Proprietățile animate pot fi și ele relative. Dacă valoarea este specificată cu secvența de conducere a simbolurilor + = sau - =. atunci valoarea țintă este calculată prin adăugarea sau scăderea unui număr dat din valoarea proprietății curente.
Important: Spre deosebire de metodele de animație scurtate, cum ar fi .slideDown () și .fadeIn (). Metoda .animate () nu ascunde elementul ca parte a efectului. De exemplu, în cazul $ ("someElement") .hide () Animați (500). animația va fi lansată, dar elementul va rămâne ascuns.durată
Durata este specificată în milisecunde. Valorile mai mari înseamnă animație mai lentă, nu mai rapidă. Valoarea implicită este de 400 milisecunde. Liniile "rapide" și "lent" pot fi folosite pentru a specifica o durată de 200 și, respectiv, 600 de milisecunde.
Comenzi de apel invers
Dacă este dat startul. pas. progres. completă. făcut. eșec și întotdeauna funcții de apel invers, ele vor fi chemați pentru fiecare element animat; acest lucru în aceste funcții va indica un element DOM animat. Dacă nu există elemente în selecție, funcțiile de retur nu vor fi executate. Dacă mai multe elemente sunt animate, atunci apelul de apel este executat o singură dată pentru fiecare element și nu o singură dată pentru animație ca întreg. Utilizați metoda .promise () pentru a obține obiectul Promise și a atașa funcțiile de apel invers.
Utilizare de bază
Animarea oricărui element, de exemplu, o imagine simplă:
Rețineți că obiectivul proprietății înălțime este "comutare". Din moment ce imaginea a fost văzută înainte, animația reduce înălțimea la 0 pentru a o ascunde. A doua presă va inversa această tranziție:
Proprietatea de opacitate a imaginii este deja egală cu valoarea țintă, astfel încât această proprietate nu este animată la al doilea clic. Deoarece valoarea proprietății stângi este o valoare relativă, imaginea este mutată spre dreapta în timpul celei de-a doua animații.
Proprietățile de direcție (de sus, de jos, de stânga) nu au niciun efect vizibil asupra elementelor dacă proprietatea lor de poziționare este setată la statică (valoarea implicită).
Important: biblioteca jQuery UI extinde metoda .animate () permițându-vă să animați anumite proprietăți non-numerice, de exemplu proprietățile de culoare. jQuery UI include, de asemenea, un mecanism pentru specificarea animațiilor specifice prin clase CSS, mai degrabă decât atribute individuale.
Notă: în cazul în care încercarea de a anima înălțimea elementului sau 0px egală lățime, în care elementul de conținut este afișat, deoarece preaplinul (preaplin), jQuery poate reduce overflow în timpul animației. Prin setarea dimensiunii elementului original ascuns înainte de animație, puteți asigura că animația rulează fără probleme. clarfix poate fi folosit pentru a fixa automat dimensiunea elementului principal fără a fi necesar să le instalați manual.
Funcție pas
A doua versiune a metodei .animate () oferă opțiunea pas, o funcție de apel invers care se numește la fiecare pas al animației. Această funcție este utilă pentru includerea unor tipuri de animații arbitrare sau schimbarea animației, în momentul execuției acesteia. Este nevoie de două argumente (acum și fx), iar acest lucru specifică un element DOM animat.
- acum. valoarea numerică a proprietății animate la fiecare pas
- fx. o referință la prototipul obiectului jQuery.fx. care conține un număr de proprietăți, cum ar fi elem pentru elementul animat, începe și se termină pentru prima și ultima valoare a proprietății animate, respectiv, și prop pentru proprietatea animată.
Rețineți că funcția pas este apelată pentru fiecare proprietate animată pe fiecare element animat. De exemplu, având două liste, funcția pas este numită de patru ori pentru fiecare pas al animației:
Trimiteți-le prietenilor: