Share
O diminuare a animației poate provoca o interfață plictisitoare. În acest tutorial, veți învăța cum să faceți acest lucru în mod corect cu jQuery.
Animație: un concept care adesea evocă reacții divizate de la oameni. Unii jură prin utilitatea sa, în timp ce alții se frămănesc de excesul său. Cu toate acestea, animațiile, atunci când sunt folosite drept, adesea măresc o interfață cu utilizatorul și o fac să se simtă mult mai curată și mai curată. În acest tutorial, vom începe cu un pic de bază jQuery, apoi vom învăța cum să creați prima noastră animație și apoi să construim efectul și, în final, să realizăm ceva ce va fi folosit în lumea reală.
Interesat? Să începem imediat! Vă rugăm să rețineți că, deoarece acest lucru este îndreptat spre începător, s-ar putea să harp puțin prea mult pe unele părți. Poartă cu mine. În cazul în care sunteți curios, verificați prima parte a demo-ului pentru efectul simplu pe care îl vom construi astăzi.
jQuery este o bibliotecă JavaScript care intenționează să vă ușureze pentru dvs., un dezvoltator, să construiți site-uri Web mai bune, bogate în funcții, interfețe de utilizator și interfețe cu utilizatori, cu cât mai puține linii de cod posibil.
O linie tipică a codului arată astfel:
$ (Elementul DOM) .something ();
Să aruncăm o privire la fiecare parte:
Aici, vom urmări doar funcțiile de animație și efecte.
jQuery oferă o tona de metode construite pe care le puteți utiliza imediat din cutie. Acestea includ metode de afișare / ascundere a elementelor cu un număr de variații, inclusiv alunecarea elementului și înlăturarea și scoaterea elementului. Puteți, de asemenea, să utilizați un număr de comutare metode care comută vizibilitatea elementului în cauză.
Înainte de a arunca o privire la fiecare dintre aceste metode, aici este formatul general pentru a apela fiecare metodă:
Accentsconagua
$ ("# element"). efect ([viteză, apel invers]); Urmărind paradigma generală jQuery, vizăm inițial elementul necesar utilizând selectorii CSS. Apoi, suntem numiți oricare dintre metodele construite.
În timp ce majoritatea metodelor pot fi numite fără parametri, de cele mai multe ori doriți să personalizați funcționalitatea acestora. Fiecare metodă ia cel puțin viteză și suna inapoi parametrii.
viteză indică durata, în secunde, a animației. Puteți trece în șiruri de caractere, inclusiv lent, normal sau rapid sau puteți fi mai precis și setați timpul în milisecunde.
suna inapoi este o funcție care se execută odată ce animațiile se termină. Puteți să-l utilizați pentru a face orice, pentru a efectua un apel AJAX în tăcere în fundal, pentru a actualiza o altă parte a interfeței cu utilizatorul și așa mai departe. Imaginația ta este limita.
Iată o listă a funcțiilor asociate cu jQuery:
Ca o caracteristică suplimentară, metoda de comutare menționată mai sus are o implementare alternativă în cazul în care ia o expresie ca parametru pentru a decide dacă să afișeze sau să ascundă un element.
De exemplu, dacă doriți să comutați numai elemente de listă care au a efect clasa, codul dvs. ar arata astfel:
$ ("li") comutați ($ (acest) .hasClass ("efect")); Pentru a pur și simplu, funcțiile de comutare verifică expresia trecută și, dacă este adevărată, se comută. Altfel, este lăsat singur. Expresia pe care am trecut-o aici verifică dacă elementul are o anumită clasă.
De multe ori, metodele construite nu corespund nevoilor dvs., caz în care cu siguranță doriți să vă creați propriile efecte personalizate. jQuery vă permite să faceți acest lucru. Destul de ușor, de fapt.
Pentru a face un efect personalizat de animație, utilizați anima metodă. Lasa-ma sa-ti arat.
$ (animat) (proprietate: valoare, [viteză, apel invers]);
anima metoda este la fel ca orice altă metodă în sensul că este invocată în același mod. Obținem un element și apoi trecem niște parametri. Parametrii sunt în cazul în care această metodă diferă de efectele pre-construite.
viteză și suna inapoi parametrii au aceeași funcție ca și în metodele anterioare. Proprietatea obiectului care deține un număr de perechi cheie / valoare este ceea ce face ca această metodă să fie unică. Parcurgeți fiecare proprietate pe care doriți să o animați împreună cu valoarea finală. De exemplu, să presupunem că doriți să animați un element la 90% din lățimea curentă, va trebui să faceți ceva de genul:
$ (animație) (width: "90%", 350, function () alert ("Animația sa terminat."); Fragmentul de mai sus va anima elementul la 90% din lățimea sa și apoi va avertiza utilizatorul cu privire la faptul că a terminat.
Rețineți că nu vă limitați la dimensiuni. Puteți anima o gamă largă de proprietăți, inclusiv opacitate, margini, umpluturi, margini, dimensiuni ale fontului. Metoda este, de asemenea, destul de flexibilă atunci când vine vorba de unități. Pixeli, ems, procente toate funcționează. Deci, ceva atât de complicat ca și cele de mai jos va funcționa. Pur și simplu nu va arăta coerentă.
$ ("lățime:" 90% "fontSize:" 14em ", înălțime:" 183px ", opacitate: 0.8, marginTop:" 2cm ", marginLeft:" 0.3in ", borderBottom: ",, 350, function () alert (" Animația sa terminat. ");); Când definiți o proprietate care constă din mai mult de un cuvânt, faceți o notă pentru ao defini în cazul cămilă. Acest lucru este în contrast puternic cu sintaxa obișnuită CSS, deci faceți o notă specială aici. este borderTop, nu border-top.
Notă: jQuery permite doar animarea proprietăților care iau valorile numerice. Aceasta inseamna folosirea doar a miezului, toate proprietatile legate de culoare sunt afisate. Nu te deranja. Cu ajutorul jQuery UI, vom anima culorile în cel mai scurt timp.
Dacă vă uitați la efectul simplu în demo, ați fi observat că este puțin rupt. Plasarea și scoaterea din funcțiune a elementului duce în mod repetat la o coadă lungă, care duce la animarea repetată.
Cea mai simplă modalitate de a evita această problemă este prin utilizarea Stop înainte de a începe animația. Aceasta elimină în mod eficient coada și animația poate continua ca de obicei. De exemplu, acesta ar fi codul dvs. normal.
(top: 20, "fast");, funcția () $ (aceasta) .animate (top: 0 , 'rapid'); );
Utilizarea Stop pentru a evita acumularea de animații, noul dvs. cod ar arăta astfel:
(top: 20, "rapid");, funcția () $ (this) .stop () .animate (top: 0, "rapid"););
Destul de ușor, nu? Dar această metodă are o mică problemă. Interacțiunile rapide nu vor duce la acumularea, ci la animațiile incomplete. Dacă doriți să eliminați complet această problemă, va trebui să vă întoarceți la un plugin ca hoverFlow.
Dacă doriți să adăugați un pic mai realist, veți avea nevoie de mai mult control asupra ratei la care progresează animația. Aici intră relaxarea. Eliberarea controlează, în esență, accelerarea și decelerarea animației în timp.
Metoda de relaxare implicită este swing-ul, care este construit în jQuery. Dispozitivul de relaxare al lui Robert Penner vă permite să utilizați o serie de efecte de relaxare. Consultați secțiunea de relaxare din demo pentru a arunca o privire asupra fiecărui efect de relaxare.
Există o atenție deosebită atunci când este vorba de folosirea unui efect de relaxare personalizat: îl puteți utiliza numai cu efecte personalizate de animație, adică cu anima metodă. Odată ce ați inclus pluginul de relaxare inclus, folosirea unei metode personalizate de relaxare este la fel de simplă ca și trecerea acestuia ca parametru, cum ar fi:
$ (animat) (lățime: "90%" înălțime: "183px",, 550, "easeInElastic");
Verificați secțiunea de relaxare a demo-ului pentru a vedea fiecare metodă în acțiune. În timp ce unele dintre efectele de relaxare ar putea să nu fie potrivite pentru toate situațiile, animațiile dvs. vor arăta cu siguranță mult mai atrăgătoare cu utilizarea adecvată a anumitor metode de relaxare.
Actualizarea la jQuery UI ne oferă o serie de caracteristici foarte necesare. De fapt, nu aveți nevoie de întreaga bibliotecă pentru a utiliza caracteristicile suplimentare. Aveți nevoie doar de fișierul cu efecte de bază pentru a obține funcționalitatea. Nu este nucleul UI, ci doar fișierul cu efecte care cântărește la un kilobytes relativ minuscul.
Caracteristicile importante pe care biblioteca de efecte jQuery UI le aduce la masă sunt suportul pentru animarea culorilor, relaxarea și tranzițiile de clasă.
Dacă vă aduceți aminte, am menționat anterior că cu biblioteca jQuery de bază, vă limitați doar la proprietățile de animație care iau numere. V-ați scos această limitare cu jQ UI. Acum puteți anima cu ușurință culoarea de fond a unui element, culoarea frontală și așa mai departe. De asemenea, în loc de a crea o funcție separată pentru aceste caracteristici extinse, aceasta doar extinde baza anima funcţie. Aceasta înseamnă că, dacă aveți biblioteca de bază inclusă în fișierul dvs., puteți utiliza ordinea obișnuită anima metoda de a face toate lucrurile murdare pentru tine.
De exemplu, dacă doriți să animați culoarea de margine a unui element pe hover, codul dvs. ar arăta astfel:
$ (this) .animate (borderColor: "negru", 1000);, funcția () $ (aceasta) .animate (borderColor: ", 500););
Transversiile de clasă sunt responsabile pentru animarea între clase. Cu biblioteca de bază, dacă ați eliminat și apoi ați adăugat o clasă care a schimbat aspectul unui element, se va întâmpla în instanță. Când aveți la bord biblioteca UI, aveți opțiunea de a transmite parametri suplimentari pentru a avea grijă de viteza animației, de metoda de relaxare și de apel invers. Ca și în cazul caracteristicii anterioare, această funcție este construită pe partea de sus a API-ului jQuery existent, care facilitează procesul de tranziție.
Caracteristica finală pe care jQuery o aduce la masă este ecuațiile integrate de relaxare. Anterior, a trebuit să utilizați un plugin suplimentar pentru a avea grijă de acest lucru, dar acum vine în pachet, deci nu mai trebuie să vă faceți griji.
Toate exemplele de mai sus au fost menite a fi doar demonstrații ale funcționalității în cauză. Nu ar fi frumos să construim ceva din lumea reală? Așa vom face astăzi. Nu este cu adevărat ceva radical nou sau revoluționar, dar acest demo vă va permite să puneți ceea ce am învățat astăzi într-un scenariu real.
Imaginați-vă acest lucru: doriți să afișați o imagine și atunci când un șoarece de utilizator o depășește, afișați 2 secțiuni interior imaginea. Unul prezintă o rubrică, iar celălalt arată o descriere minusculă a imaginii. Sunt sigur că veți găsi literalmente pluginuri gazillion care fac același lucru, dar astăzi o vom construi de la zero. Îți promit că nu e atât de tare cum sună. De fapt, este de fapt destul de ușor și poate fi foarte rapid construit. Să începem.
În primul rând, avem nevoie de o bază solidă de marcare pentru a continua.
Început de animații cu jQuery - de Siddharth pentru NetTuts Început de animații cu jQuery
de Siddharth pentru cei minunați de la Net TutsO utilizare simplă în lumea reală a efectelor de animație urmată de demo-uri pentru textul articolului care demonstrează o soluție fixă pentru crearea animației și diferitele metode de relaxare disponibile.
Un simplu efect real al lumii
Atunci când metoda este schimbată, ea ajunge la zero înălțime folosind jQuery standard de relaxare și apoi se extinde folosind metoda de relaxare specificată.
ThemeForest
Singurul loc de care aveți nevoie pentru șabloanele și temele site-uluiCodeCanyonDestinația principală pentru scripturi și fragmente de cod
În acest sens, va trebui mai întâi să decidem o structură pentru fiecare element. Fiecare element este înfășurat de un div cu o clasă de articol. În interior există trei elemente: imaginea în sine și 2 elemente div care dețin titlul și descrierea.
Celelalte părți sunt destul de luminoase și auto-explicative. Începem prin includerea bibliotecii jQuery, a bibliotecii jQuery UI și a fișierului nostru care conține codul personalizat JS. Rețineți că am nevoie doar de partea de bază a efectelor jQuery UI, așa că am descărcat numai asta. Dacă doriți mai multe efecte încorporate, veți avea nevoie de o construcție personalizată. Puteți descărca o construcție personalizată aici.
Iată cum arată pagina noastră cu această fază completă.
.element poziție: relativă; margine: 20px 60px 40px 0; overflow: ascuns; .item .title, .item .desc fundal: # 000; culoare: #fff; poziția: absolută; afișare: bloc; lățime: 638px; opacitate: 0,4; .item .titul top: 0; font-size: 16px; padding: 12px 10px 25px 0; text-aliniere: drept; .item .desc jos: 0; font-size: 12px; umplutură: 5px 0 15px 10px;
Câteva lucruri de care trebuie să faci o notă de aici. Fiecare element de element are poziţie proprietate setat la rudă astfel încât elementele din interiorul acestuia să poată fi poziționate cu ușurință. De asemenea, ei revărsare proprietatea este setată la ascuns astfel încât să putem ascunde titlul și descrierea afară atunci când nu sunt necesare.
Titlul și descrierea au propriile lor poziţie proprietate setat la absolut astfel încât acestea să poată fi poziționate exact în elementul element. Titlul are a top valoare de 0 astfel încât să fie în partea superioară și descrierea să aibă fund valoarea setată la 0, deci dreapta în partea de jos.
În afară de asta, CSS este destul de bine plătit și se preocupă în principal de tipografie, de o mică poziționare și stil. Nimic prea radical.
Iată cum arată pagina noastră cu această fază completă.
$ (document) .ready (functie () // Cod pentru alte parti ale demo $ ("." item) copii ("div.title") animate (top: -60, 300); (".itm") copii ("div.desc") animate (jos: -40, 300); $ (" (top: 0, 700, "easyOutBounce"); $ (this) .children ("div.desc") stop () , 700, "easeOutBounce");, funcția () $ (this) .copii ("div.title") stop () animate (top: -60, 500); ("(")) () () () () () () (). () () () () () () () () () . );); Ar putea părea puțin impunător, dar nu este. Permiteți-mi să explic fiecare parte.
Logica acestui efect este destul de simplă. Deoarece elementele sunt plasate absolut, inițial plasăm elementele din fereastra de vizualizare. Atunci când imaginea este suspendată, trebuie să o mutăm înapoi în poziția inițială, adică în partea de sus și de jos a imaginii.
În primul rând, mutăm titlul și descrierea din vedere. Facem acest lucru cu JavaScript în loc de CSS pentru un motiv foarte specific. Chiar dacă JS este dezactivat, se degradează destul de grațios. Titlul și descrierea sunt încă suprapuse peste imagine și arată exact ca starea de hover. Dacă am folosi CSS pentru a ascunde titlul și descrierea și dacă JS este dezactivat, ei ar fi complet ascunși și astfel inutili. Am ales să folosesc JS pentru munca murdară în interesul îmbunătățirii progresive.
Ne legăm inițial codul personalizat de funcția de hover a fiecărui element de element. Acest lucru permite utilizarea face acest handler destul de generice și reutilizabile. Adăugarea acestei funcții altora este la fel de simplă ca și dând-o articol clasă. Prima funcție este pentru planare eveniment și al doilea este pentru unhover eveniment.
În scopul funcției, acest se referă la elementul care a declanșat evenimentul. Noi folosim anima metodă de modificare a valorilor corespunzătoare. Folosim, de asemenea, un pic de relaxare pentru a deveni un pic mai captivant. La ieșirea mouse-ului sau la descoperire, vom schimba valorile înapoi la valorile lor implicite.
Ca un pic mai mult, atunci când containerele pentru titlu și descriere sunt plimbate, le culori lent morph, datorită jQuery UI.
Și noi suntem de fapt făcuți. Nu a luat prea mult timp, nu-i așa? Nu este rău pentru un scenariu mic, care este și mai mic, având în vedere câte linii au fost alocate exclusiv pentru bretelele curbate.
Și acolo aveți. Cum se creează animații cu jQuery împreună cu un exemplu din lumea reală de a pune ceea ce ai învățat să folosească bine. Sperăm că ați găsit acest tutorial interesant și util. Simțiți-vă liber să reutilizați acest cod în altă parte în proiectele dvs. și faceți clic aici dacă întâmpinați dificultăți.
Întrebări? Ce lucruri frumoase de spus? Critici? Activați secțiunea de comentarii și lasă-mă un comentariu. Codificare fericită!
Știați că puteți câștiga până la 600 USD pentru a scrie un tutorial PLUS și / sau pentru noi? Căutăm tutoriale detaliate și bine scrise despre HTML, CSS, PHP și JavaScript. Dacă sunteți în măsură, contactați Jeffrey la [email protected].
Rețineți că o compensație reală va depinde de calitatea tutorialului final și a scenariului.
