Implementarea animațiilor cu jQuery

Efectele animate din jQuery Nu sunt animațiile pe care le cunoaștem, adică nu vom da mișcare unui desen, este important să clarificăm acest lucru, deoarece poate duce la confuzie. Aceste efecte animate se referă la modul în care sunt generate tranzițiile elementelor în cadrul SOARE, un element care se poate mișca încet dintr-un colț al browserului sau dispare rupându-se în mii de bucăți.
La prima vedere poate părea că ne sunt utile, până la urmă, dacă vrem să apară sau să dispară un element, nu ne va importa cum se întâmplă, totuși pentru cei care studiază comportamentul interfețe utilizator Acest lucru este foarte important, deoarece poate seta starea de spirit a utilizatorului sau poate fi afișat ca un mod subtil de a face vizualul ceva mai atrăgător.
Există desigur cei care abuzează și exagerează în utilizarea efectelor animate și supraîncarcă interfața atât de mult încât devine grea sau nesigură și îl face pe utilizator să sufere atunci când folosește sistemul, de aceea este necesar să aveți un conștiință minimă și moderare atunci când se aplică aceste tipuri de efecte.
Este important să știm că diferitele tipuri de animații Au o serie de opțiuni controlabile din apelul pe care îl facem, putem controla durata acestuia, astfel încât să putem calibra dacă efectul afectează sau nu utilizabilitatea și dacă, în funcție de durata, poate fi detaliat și poate obține efectul dorit și poate indica, de asemenea, funcția sau metoda care trebuie executată în sună din nou la sfârșitul animației, de exemplu, dacă facem să dispară un buton când acesta nu mai este acolo, se execută o metodă care apoi îi trimite utilizatorului un mesaj.
O altă opțiune pe care o avem este să trecem un harta obiectelor în care definim opțiunile avansate sau exclusive ale efectului animat pe care îl folosim, totuși acest lucru este cel mai important atunci când vrem să facem ceva foarte specific și avansat. Sintaxa pentru utilizarea acestor opțiuni este următoarea:

 $ (selector) .effect (durata); $ (selector) .effect (durata, funcția CallBack); $ (selector) .effect (functionCallBack); $ (selector) .effect (mapObjects); 

După cum vedem, fiecare linie corespunde fiecărei variante posibile pe care le putem aplica în animații standard, este posibil ca unele animații să aibă o caracteristică specială, cu toate acestea, în cele pe care le vom vedea în acest tutorial, vom lucra cu aceasta.
Unul dintre cele mai utilizate și mai utile efecte la care ne putem gândi este afișarea și ascunderea elementelor și se dovedește, de asemenea, că sunt efecte destul de simple de implementat, de aceea le vom folosi ca exemplu.
show () și hide ()Metodele care ne permit să atingem aceste obiective sunt Spectacol() Da ascunde (), pe măsură ce le vedem numele în engleză corespund acțiunii, arată pentru prima și ascunde pentru a doua, acestea pot fi aplicate oricărui element din cadrul nostru SOARE, deci sunt destul de practice și utile.
Vom face o mică animație în care vom folosi durata și apelul către o funcție sună din nou în momentul executării acestuia, vom aplica efectele Spectacol() Da ascunde () și astfel putem învăța cum sunt folosite acestea.
În următorul cod vedem cum, în primul rând, ceea ce facem este să includem biblioteca jQuery dintr-unul din CDN adecvat, cu aceasta evităm să fie nevoie să îl stocăm local și astfel vom profita de memoria cache a browserului.
Apoi definim două blocuri numit elementul 1 Da element2 respectiv, unde primul este ascuns și al doilea vizibil și în cele din urmă avem un buton care spune start la care aplicăm în evenimentul său de clic care execută funcția a incuraja().
Functia a incuraja() aplicați mai întâi animația Spectacol() la elementul 1 și îi conferă o valoare de 1000 de milisecunde care este egală cu 1 secundă și la aceasta adăugăm o sună din nou unde aplicăm efectul ascunde () a noastra element2 și generează un mesaj pe consolă.
În interiorul animației ascunde () la ce ne aplicăm element2 am creat un sună din nou unde vom scrie și un mesaj prin consolă. Deci, să ne uităm la codul pentru primul nostru exemplu:

 Animații
Acesta este elementul nostru ascuns inițial

Pentru a rula animația, faceți clic pe buton
start 

Să vedem acum cum arată în browserul nostru, în următoarea imagine vom vedea HTML Înainte de a executa orice acțiune, să ne uităm la modul în care elementul 1 nereprezentat:

Acum, în următoarea imagine, vom vedea ce se întâmplă după ce faceți clic pe buton start, vom observa că acum vedem elementul ascuns și în consolă vom avea două mesaje, dacă fac exemplul live vor vedea și cum apare un element primul și o secundă mai târziu celălalt dispare:

Într-un mod simplu, am dat viață afișării și ascunderii elementelor din documentul nostru HTML.
Există momente când vrem ca un buton să funcționeze ca un comutator, afișând și ascunzând un element sau un grup de elemente, deși acest lucru este ușor de realizat prin evaluarea stărilor și utilizarea metodelor Spectacol() Da ascunde (), adevărul este că am genera prea mult cod pentru ceva atât de simplu, de aceea echipa de jQuery s-au gândit la asta și ne oferă metoda comutare ().
Ce face metoda toggle ()?Ceea ce face această metodă este să evalueze starea curentă a elementului și astfel, dacă este vizibil, îl ascunde și dacă este ascuns îl arată, așa cum indică comportamentul de tip comutator. Cel mai bun lucru este că la această metodă putem adăuga diferite opțiuni de animație, cu durata și posibilitatea de a efectua sună din nou.
Să construim acum un exemplu în care să punem în practică ceea ce am învățat despre metoda toggle (), să vedem codul de mai jos:

 Animații
Rezultatul executării efectului toggle ().

start 

În următorul cod vom vedea cum am creat un div numit elementul 1 care este ascuns inițial, apoi avem un buton start care atunci când faceți clic va apela funcția de animare, va avea metoda comutare () aplicat elementului și în primă instanță va apărea și va afișa un mesaj pe consolă.
Să vedem starea inițială a acestui cod de browser, vom observa că avem doar butonul și nu există nimic în consolă:

Acum să vedem cum atunci când faceți clic pe buton apare elementul ascuns și ne reflectă mesajul prin consolă:

În cele din urmă, dacă facem din nou clic pe buton, elementul va fi ascuns și mesajul va fi repetat în consolă, pe care îl observăm când vedem numărul Trei alături, care indică de câte ori a fost declanșat evenimentul.

da OK Spectacol() Da ascunde () Sunt eficiente, pot părea cam simple la prima vedere, de aceea avem și alte metode care ne ajută să realizăm diferite animații, în acest caz vorbim despre decolorare Da alunecare care corespund decolorării și alunecării, unde primul are un efect asemănător apariției și al doilea alunecă de pe o margine a ecranului sau din containerul elementului.
Să vedem în lista următoare echivalenții săi cu Spectacol() și a hide ():
fadeIn () și slideIn ()Ele corespund efectelor pentru a arăta elemente, adică sunt echivalente cu Spectacol().
fadeOut și slideOut ()Ele corespund efectelor de a ascunde elemente, adică sunt echivalente cu ascunde ().
fadeToggle () și slideToggle ()Există un al treilea caz și este cel care corespunde efectelor de tip switch și sunt echivalente cu comutare ().
Ca exercițiu, vă lăsăm să parcurgeți din nou exemplele, dar folosind aceste noi metode, astfel încât să puteți vedea direct cum funcționează.
Cu aceasta încheiem acest tutorial, am învățat să ne animăm elementele într-un mod subtil și inteligent, este important să nu abuzăm de aceste efecte în modul de plasare a timpilor de animație foarte lungi, deoarece ceea ce vom realiza este să ne enervăm utilizatorul și întârziați munca lor, amintindu-vă că trebuie să menținem utilizabilitatea mai presus de orice.