jQuery are o serie de funcții care efectuează efecte animate cu elemente de pagină. Pornind de la caracteristici simple: ascunderea, apariția, mutarea elementelor, biblioteca vă va permite să vă creați propriile efecte mai complexe, bazate pe schimbarea proprietăților CSS.
Aceste modificări pot apărea fără probleme sau instantaneu, încetinirea, accelerarea sau funcționarea uniformă.
.arată () .hide ()
Afișează / ascunde instantaneu elementele selectate prin setarea proprietății lor de afișare css la nici una, fără a schimba transparența și dimensiunile lor.
.arată (durată, [apel invers]) .hide (durată, [apel invers])
durata - durata animației (aspect sau ascundere).
Pot fi specificate în milisecunde (200 și 600 milisecunde)
Se poate specifica prin valoarea șirului "rapid" sau "lent".
Dacă acest parametru nu este setat, animația va apărea instantaneu, elementul va apărea / dispare pur și simplu
inversarea apelului este o funcție specificată ca un handler de ieșire pentru o animație (care apare sau se ascunde).
.afișați ([durata], [relaxarea], [apelul invers]) .hide ([durata], [relaxarea], [apelarea])
relaxare - schimbați viteza animației (dacă va încetini până la sfârșitul rundei sau va accelera invers).
jQuery este disponibil numai două astfel de funcții: "liniar" și "swing"
(pentru animație uniformă și animație cu accelerare)
Alte opțiuni pot fi găsite în pluginuri. De exemplu, jQuery UI oferă mai mult de 30 de difuzoare noi.
Afișăm toate paragrafele ascunse. Utilizați cuvântul cheie lent ca parametru. Animația este efectuată timp de 600 de milisecunde.
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
Afișați toate elementele div div ascunse, folosind cuvântul cheie rapid. Fiecare animație durează 200 de milisecunde și după ce începe următoarea animație.
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
Ascundeți elementele divului cu un clic pe ele timp de 2 secunde și când elementul este deja ascuns, ștergeți-l. Încercați foarte repede să faceți clic pe div'am.
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
.([lungire], [relaxare], [apel invers]) .slideUp ([durata], [relaxare], [apel invers])
Cu aceste funcții, puteți afișa și ascunde elementele selectate pe pagină, prin extinderea și răsturnarea fără probleme.
Rețineți că după ascunderea elementului, afișajul proprietății css devine none. dar, înainte de apariție, își revine valoarea inițială.
Deschis, "alunecând în jos", toate elementele div. Pentru a seta ora, utilizați cuvântul cheie "lent", adică deschide încet.
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
.slideToggle ([durata], [relaxare], [apel invers])
Apelarea această metodă are ca rezultat o pliere netedă (în cazul în care elementul este desfășurat) sau desfășurare (în cazul în care elementul este redusă la minimum) elementele selectate în pagină.
Rețineți că după ascunderea elementului, proprietatea css de afișare devine none și, înainte de apariție, devine valoarea sa anterioară înapoi. Când faceți clic pe buton, elementul cu o imagine și un text va fi alternativ restrâns și dezinstalat:
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
.fadeIn ([durata], [ușurând], [callback]) .fadeOut ([durata], [ușurând], [callback])
Cu aceste funcții, puteți afișa și ascunde elementele selectate pe pagină, schimbând fără probleme transparența.
Rețineți că, după ascunderea elementului, proprietatea de afișare a lui css devine automat egală cu nici una, iar înainte de apariție, devine valoarea sa veche înapoi.
"Afișează" elementele div div ascunse unul câte unul, de fiecare dată când efectul de animație durează aproximativ 600 ms.
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
"Afișează" blocul roșu deasupra textului. La sfârșitul acestei animații, se lansează următorul efect, care "manifestă" eticheta Span.
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
.fadeTo ([durata], opacitate, [relaxare], [apel invers])
Modifică nivelul de transparență al elementelor selectate din pagină. Vă permite să schimbați ușor transparența.
fadeTo ia aceleași argumente ca și arată sau ascunde.
În plus, al doilea argument, opacitatea, este un număr de la 0 la 1, care caracterizează transparența "țintă" a elementului.
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
Schimbăm transparența elementelor div aleatoriu.
Durata efectului este de aproximativ 200 ms.
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
.fadeToggle ([durata], [relaxare], [apel invers])
Apelarea acestei metode duce la o dispariție netedă (dacă elementul nu este ascuns) sau la apariția (dacă elementul este ascuns) a elementelor selectate din pagină, schimbând transparența.
Rețineți că după ascunderea elementului, proprietatea css de afișare devine none și, înainte de apariție, devine valoarea sa anterioară înapoi.
Când faceți clic pe buton, elementul cu imagine și text va apărea și va dispărea alternativ:
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
.animați (proprietăți, [durata], [relaxare], [apel invers])
Efectuează o animație definită de utilizator, cu elemente selectate. Animația are loc datorită unei schimbări netede a proprietăților CSS ale elementelor.
proprietăți - o listă de proprietăți CSS care participă la animație și valorile lor finale.
Este setat de obiect, în format Este foarte asemănător cu setarea unui grup de parametri în metoda .css ().
Cu toate acestea, proprietățile au o gamă mai largă de tipuri de valori.
Ele pot fi stabilite nu numai sub forma unor unități familiare:
numere, pixeli, procente etc.
dar și relativ. În plus, puteți specifica valorile "ascunde", "arăta", "comuta", care ascunde, afișează sau modifică vizibilitatea elementului la contrariul, datorită parametrului în care sunt aplicate.
Ascundeți elementele div, reducând transparența și reducând înălțimea (plierea) elementului. Rețineți că în parametrul proprietăți, puteți specifica numai acele proprietăți css care sunt specificate utilizând valori numerice.
De exemplu, proprietatea de culoare de fundal nu trebuie utilizată.
Ghid avansat de asistență ()
Faceți clic pe butonul pentru a începe animația pentru elementul div.
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
Un exemplu de animație "relativă". Utilizați butoanele din dreapta / stânga de mai multe ori.
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
Uitați-vă la următorul exemplu - va fi mult mai clar.
Primul buton arată doar un exemplu de animație paralelă. Un anumit element cu identificatorul # bloc1 ar trebui să-și schimbe lățimea la 90% din cea posibilă, fontul trebuie să fie setat la o dimensiune de 24px și cadrul drept ar trebui să devină o lățime de 15px.
Rețineți că modificarea lățimii apare simultan cu celelalte două efecte, care se urmează deja în ordinea coadajului.
Cel de-al doilea buton lansează aproape aceeași animație, tocmai toate efectele urmează unul pe altul strict la rândul său.
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
se întoarce: jQuery
Opresc toate efectele de animație care rulează pentru toate elementele setului.
Faceți clic pe butonul Du-te pentru a porni animația.
Apoi, faceți clic pe butonul Oprire pentru al opri.
Dacă faceți clic pe butonul Înapoi, veți lansa un alt efect de animație - blocul se va deplasa în direcția opusă.
Rețineți că numărul va fi transmis din poziția în care blocul a fost oprit.
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
returnează: Array
Returnează o referință la coada de articole (gama de funcții).
Dezasamblați acest exemplu. Făcând clic pe buton, ajungem la lungimea cozii la momentul actual.
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
.coadă (apel invers)
se întoarce: jQuery
Adaugă o nouă funcție, care trebuie executată, la sfârșitul coadă pentru toate elementele setului.
În exemplu: coada de funcții definite de utilizator.
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
.coadă (coadă)
se întoarce: jQuery
Înlocuiește coada pentru toate elementele din set cu o coadă nouă (o serie de funcții).
În exemplu, dând clic pe butonul Stop setează matricea de coadă pentru a elimina coada curentă. Făcând clic pe butonul Start, coada este pornită din nou.
Deschideți exemplul într-o fereastră nouă și examinați codul sursă
.dequeue ()
se întoarce: jQuery
Îndepărtează funcția de așteptare la sfârșitul coadă, permițând coada să continue.
În exemplu, dequeue este folosit pentru a permite ca cozi să continue după ce au folosit coada de așteptare (callback). Încercați să eliminați în linia de exemplu $ (this) .dequeue (); și veți descoperi că animația se va opri după declanșarea toggleClass.
Deschideți exemplul într-o fereastră nouă și examinați codul sursă