Implementacija animacija s jQueryjem

Animirani efekti u jQuery To nisu animacije koje poznajemo, odnosno nećemo dati pokret crtežu, važno je to razjasniti jer to može dovesti do zabune. Ovi animirani efekti odnose se na način na koji se stvaraju prijelazi elemenata unutar SUNCE, element koji se može sporo kretati iz kuta preglednika ili nestati lomeći se na tisuće dijelova.
Na prvi pogled može se činiti da su nam korisne, na kraju, ako želimo da se neki element pojavi ili nestane, možda nam neće biti važno kako se to događa, međutim za one koji proučavaju ponašanje korisnička sučelja To je vrlo važno jer može postaviti raspoloženje korisnika ili biti prikazano kao suptilan način da vizualni izgled učini nešto privlačnijim.
Naravno, ima i onih koji zloupotrebljavaju i pretjeruju u korištenju animiranih efekata te preopterećuju sučelje toliko da ono postaje teško ili nepouzdano i čini korisnika patnjom tijekom korištenja sustava, zato je potrebno imati minimum savjesti i umjerenost pri primjeni ovih vrsta učinaka.
Važno je znati da se razlikuju vrste animacija Imaju brojne mogućnosti kojima se može upravljati iz poziva koji upućujemo, možemo kontrolirati njegovo trajanje, tako da možemo kalibrirati utječe li učinak na upotrebljivost ili ne i ako se ovisno o vremenu koje traje može detaljno opisati i postići željeni učinak, a mi može također naznačiti funkciju ili metodu koja će se izvršiti u uzvratiti poziv na kraju animacije, na primjer ako učinimo da gumb nestane kad ga više nema, izvršava se metoda koja zatim šalje poruku korisniku.
Druga mogućnost koju imamo je proći a karta objekta u kojima definiramo napredne ili ekskluzivne opcije animiranog efekta koji koristimo, no to je ponajviše kada želimo učiniti nešto vrlo specifično i napredno. Sintaksa za korištenje ovih opcija je sljedeća:

 $ (selektor) .effect (trajanje); $ (selektor) .effect (trajanje, funkcija CallBack); $ (selektor) .effect (functionCallBack); $ (selektor) .effect (mapObjects); 

Kako vidimo da svaki redak odgovara svakoj od mogućih varijacija koje možemo primijeniti u standardnim animacijama, moguće je da neka animacija ima određenu karakteristiku, međutim s onima koje ćemo vidjeti u ovom vodiču poradit ćemo na tome.
Jedan od najčešće korištenih i najkorisnijih učinaka kojih se možemo sjetiti je prikazivanje i skrivanje elemenata, a također se pokazalo da su to vrlo jednostavni efekti za implementaciju, zato ćemo ih koristiti kao primjer.
show () i hide ()Metode koje nam omogućuju postizanje ovih ciljeva su Pokazati() Y sakriti (), kako vidimo da njihova imena na engleskom odgovaraju radnji, prikazuju se za prvu, a za drugu skrivaju, mogu se primijeniti na bilo koji element unutar našeg SUNCE, pa su prilično praktični i korisni.
Napravit ćemo malu animaciju u kojoj ćemo koristiti trajanje i poziv na funkciju uzvratiti poziv u vrijeme izvršavanja primijenit ćemo efekte Pokazati() Y sakriti () i tako možemo naučiti kako se oni koriste.
U sljedećem kodu vidimo kako na prvom mjestu ono što radimo je uključivanje knjižnice jQuery iz jednog od CDN adekvatno, čime izbjegavamo lokalno spremanje i na taj način ćemo iskoristiti predmemoriju preglednika.
Zatim definiramo dva bloka imenovani stavka 1 Y element 2 odnosno gdje je prvi skriven, a drugi vidljiv i na kraju imamo gumb koji kaže početak na koji se primjenjujemo u njegovom događaju klika koji izvršava funkciju poticati ().
Funkcija ohrabriti () prvo primijenite animaciju Pokazati() prema stavka 1 te mu daje vrijednost od 1000 mili-sekundi koja je jednaka 1 sekundi i tome dodajemo a uzvratiti poziv gdje primjenjujemo učinak sakriti () naše element 2 i generira poruku po konzoli.
Unutar animacije sakriti () na što se primjenjujemo element 2 stvorili smo a uzvratiti poziv gdje ćemo također napisati poruku putem konzole. Pogledajmo dakle kôd za naš prvi primjer:

 Animacije
Ovo je naš početni skriveni element

Za pokretanje animacije kliknite gumb
Početak 

Pogledajmo sada kako to izgleda u našem pregledniku, na sljedećoj slici ćemo vidjeti HTML Prije izvršavanja bilo koje radnje, pogledajmo kako se stavka 1 nije prikazano:

Sada ćemo na sljedećoj slici vidjeti što se događa nakon klika na gumb Početak, primijetit ćemo da sada vidimo skriveni element i u konzoli ćemo imati dvije poruke, ako izvedu primjer uživo vidjet će i kako se jedan element pojavljuje prvi, a drugi kasnije drugi nestaje:

Na jednostavan način dali smo život prikazivanju i skrivanju elemenata unutar našeg dokumenta HTML.
Postoje slučajevi kada želimo da gumb radi kao prekidač, prikazujući i skrivajući element ili skupinu elemenata, iako je to lako učiniti procjenom stanja i upotrebom metoda Pokazati() Y sakriti (), istina je da bismo generirali previše koda za nešto tako jednostavno, zato je tim jQuery razmišljali su o tome i pružaju nam metodu toggle ().
Što radi metoda toggle ()?Ono što ova metoda radi je procjena trenutnog stanja elementa i stoga, ako je vidljiv, sakriva ga, a ako je skriven to pokazuje, na što ukazuje ponašanje tipa prekidača. Najbolje je to što ovoj metodi možemo dodati različite mogućnosti animacije, s trajanjem i mogućnošću izvođenja uzvratiti poziv.
Izgradimo sada primjer u kojem primjenjujemo u praksi ono što smo naučili o metodi toggle (), pogledajmo donji kod:

 Animacije
Rezultat izvršavanja toggle () efekta.

Početak 

U sljedećem kodu vidjet ćemo kako smo stvorili div koji se zove stavka 1 koji je u početku skriven, tada imamo gumb Početak koja će pri klikanju pozvati funkciju animirati, imat će metodu prekidač () primijeniti na element i u prvom će se slučaju pojaviti i prikazati poruku po konzoli.
Pogledajmo početno stanje ovog koda prema pregledniku, primijetit ćemo da imamo samo gumb i nema ništa u konzoli:

Pogledajmo sada kako se klikom na gumb pojavljuje skriveni element koji nam odražava poruku putem konzole:

Konačno, ako ponovno pritisnemo gumb, element će biti skriven, a poruka će se ponoviti u konzoli, što primijetimo kada vidimo broj tri pored njega, što pokazuje koliko je puta događaj pokrenut.

Da dobro Pokazati() Y sakriti () Učinkoviti su, na prvi pogled mogu izgledati pomalo jednostavni, zato imamo i druge metode koje nam pomažu u stvaranju različitih animacija, u ovom slučaju govorimo o uvenuti Y slajd koji odgovaraju blijeđenju i klizanju, pri čemu prvi ima učinak poput pojavljivanja, a drugi klizi s ruba zaslona ili spremnika elementa.
Pogledajmo na sljedećem popisu njegove ekvivalente Pokazati() i za sakriti ():
fadeIn () i slideIn ()Oni odgovaraju efektima za prikaz elemenata, odnosno ekvivalentni su Pokazati().
fadeOut i slideOut ()Oni odgovaraju efektima skrivanja elemenata, odnosno ekvivalentni su sakriti ().
fadeToggle () i slideToggle ()Postoji i treći slučaj i to onaj koji odgovara efektima prekidača i oni su ekvivalentni toggle ().
Kao vježbu, dopuštamo vam da ponovno prođete kroz primjere, ali koristeći ove nove metode kako biste iz prve ruke vidjeli kako oni rade.
Ovim smo završili ovaj vodič, naučili smo animirati naše elemente na suptilan i inteligentan način, važno je ne zloupotrijebiti ove učinke na način postavljanja vrlo dugog vremena animacije, jer ono što ćemo postići je da živciramo korisnika i odgoditi njihov rad, imajući na umu da iznad svega moramo zadržati upotrebljivost.