Animacijų diegimas naudojant „jQuery“

Animaciniai efektai „jQuery“ Tai nėra animacijos, kurias mes žinome, tai yra, mes nesuteiksime judesio piešiniui, svarbu tai paaiškinti, nes tai gali sukelti painiavą. Šie animaciniai efektai nurodo elementų perėjimų generavimo būdą SAULĖ, elementas, galintis lėtai judėti iš naršyklės kampo arba išnykti, suskaidomas į tūkstančius dalių.
Iš pirmo žvilgsnio gali atrodyti, kad jie mums yra naudingi, galų gale, jei norime, kad elementas atsirastų ar išnyktų, mums gali būti nesvarbu, kaip tai atsitiks, tačiau tiems, kurie studijuoja vartotojo sąsajos Tai labai svarbu, nes jis gali nustatyti vartotojo nuotaiką arba būti rodomas kaip subtilus būdas padaryti vaizdą šiek tiek patrauklesnį.
Žinoma, yra tokių, kurie piktnaudžiauja ir perdeda animacinių efektų naudojimą ir perkrauna sąsają tiek, kad ji tampa sunki ar nepatikima ir priverčia vartotoją kentėti naudojant sistemą, todėl būtina turėti minimalią sąžinę ir taikant tokio tipo efektus.
Svarbu žinoti, kad skirtingi animacijų tipai Jie turi daugybę valdomų pasirinkimų iš mūsų skambučio, mes galime kontroliuoti jo trukmę, kad galėtume kalibruoti, ar poveikis turi įtakos naudojimui, ar ne, ir jei, priklausomai nuo trukmės, jis gali būti išsamus ir pasiekti norimą efektą. taip pat gali nurodyti funkciją ar metodą, kurį reikia atlikti perskambink animacijos pabaigoje, pavyzdžiui, jei išjungiame mygtuką, kai jo nebėra, vykdomas metodas, kuris tada siunčia vartotojui pranešimą.
Kitas variantas, kurį turime, yra praeiti a objektų žemėlapis kuriame mes apibrėžiame išplėstines ar išskirtines mūsų naudojamo animacinio efekto parinktis, tačiau tai labiausiai svarbu, kai norime padaryti kažką labai konkretaus ir pažangaus. Šių parinkčių naudojimo sintaksė yra tokia:

 $ (selektorius) .efektas (trukmė); $ (selektorius) .effect (trukmė, „CallBack“ funkcija); $ (selektorius) .effect (functionCallBack); $ (selektorius) .effect (mapObjects); 

Kadangi matome, kad kiekviena eilutė atitinka visus galimus variantus, kuriuos galime pritaikyti standartinėse animacijose, gali būti, kad kai kuri animacija turi tam tikrų savybių, tačiau tose, kurias matysime šioje pamokoje, mes su tuo dirbsime.
Vienas iš dažniausiai naudojamų ir naudingiausių efektų, apie kuriuos galime galvoti, yra elementų rodymas ir slėpimas, taip pat paaiškėja, kad jie yra gana paprasti efektai, todėl mes ketiname juos naudoti kaip pavyzdį.
rodyti () ir slėpti ()Metodai, leidžiantys mums pasiekti šiuos tikslus, yra šie Rodyti() Y paslėpti (), matome, kad jų pavadinimai anglų kalba atitinka veiksmą, rodomi pirmajam ir slepiami antram, jie gali būti taikomi bet kuriam mūsų elementui SAULĖ, todėl jie yra gana praktiški ir naudingi.
Mes padarysime nedidelę animaciją, kurioje naudosime trukmę ir iškvietimą į funkciją perskambink jo vykdymo metu taikysime efektus Rodyti() Y paslėpti () ir mes galime sužinoti, kaip jie naudojami.
Šiame kode matome, kaip pirmiausia mes įtraukiame biblioteką „jQuery“ iš vieno iš CDN tinkamas, todėl mes neturime jo saugoti vietoje, todėl pasinaudosime naršyklės talpykla.
Tada mes apibrėžiame du blokus pavadintas 1 punktas Y elementas2 atitinkamai, kur pirmasis yra paslėptas, o antrasis matomas, ir galiausiai turime mygtuką, kuriame sakoma pradžia, kurią taikome jo spustelėjimo įvykyje, kuris vykdo funkciją skatinti ().
Funkcija skatinti () pirmiausia pritaikykite animaciją Rodyti() į 1 punktas ir suteikia jam 1000 milisekundžių vertę, lygią 1 sekundei, ir prie to pridedame a perskambink kur taikome efektą paslėpti () mūsų elementas2 ir sukuria pranešimą kiekvienoje konsolėje.
Animacijos viduje paslėpti () į ką kreipiamės elementas2 sukūrėme a perskambink kur taip pat parašysime pranešimą per konsolę. Taigi pažvelkime į pirmojo pavyzdžio kodą:

 Animacijos
Tai yra mūsų pradinis paslėptas elementas

Norėdami paleisti animaciją, spustelėkite mygtuką
Pradėti 

Dabar pažiūrėkime, kaip tai atrodo mūsų naršyklėje, kitame paveikslėlyje pamatysime HTML Prieš atlikdami bet kokį veiksmą, pažiūrėkime, kaip 1 punktas nerodomas:

Dabar kitame paveikslėlyje pamatysime, kas atsitiks spustelėjus mygtuką Pradėti, pastebėsime, kad dabar matome paslėptą elementą ir konsolėje turėsime du pranešimus, jei jie atliks pavyzdį gyvai, jie taip pat pamatys, kaip vienas elementas pasirodo pirmasis, o po kurio laiko kitas dingsta:

Paprastu būdu suteikėme gyvybę parodyti ir paslėpti mūsų dokumento elementus HTML.
Kartais norime, kad mygtukas veiktų kaip jungiklis, rodantis ir slepiantis elementą ar elementų grupę, nors tai lengva padaryti įvertinus būsenas ir naudojant metodus Rodyti() Y paslėpti (), tiesa ta, kad mes sugeneruotume per daug kodo tokiam paprastam dalykui, todel komanda „jQuery“ jie apie tai pagalvojo ir pateikė mums metodą perjungti ().
Ką daro toggle () metodas?Šis metodas įvertina dabartinę elemento būseną, taigi, jei jis yra matomas, jis jį slepia, o jei jis yra paslėptas, tai rodo, kaip rodo jungiklio tipo elgesys. Geriausia yra tai, kad prie šio metodo galime pridėti įvairių animacijos parinkčių su trukme ir galimybe perskambink.
Dabar sukurkime pavyzdį, kuriame praktiškai pritaikysime tai, ką sužinojome apie metodą „toggle ()“, pažiūrėkime žemiau esantį kodą:

 Animacijos
Toggle () efekto vykdymo rezultatas.

Pradėti 

Šiame kode pamatysime, kaip sukūrėme div, vadinamą 1 punktas kuris iš pradžių yra paslėptas, tada mes turime mygtuką Pradėti kuris spustelėjęs iškvies animate funkciją, turės metodą perjungti () pritaikytas elementui ir pirmiausia jis bus rodomas ir parodys pranešimą kiekvienoje konsolėje.
Pažiūrėkime pradinę šio kodo būseną naršyklėje, pastebėsime, kad turime tik mygtuką ir konsolėje nieko nėra:

Dabar pažiūrėkime, kaip spustelėjus mygtuką, paslėptas elementas pasirodo ir atspindi pranešimą per konsolę:

Galiausiai, jei dar kartą spustelėsime mygtuką, elementas bus paslėptas ir pranešimas bus pakartotas konsolėje, kurią pastebėsime pamatę numerį trys šalia, kuris nurodo, kiek kartų įvykis buvo suaktyvintas.

taip gerai Rodyti() Y paslėpti () Jie yra veiksmingi, iš pirmo žvilgsnio gali atrodyti šiek tiek paprasti, todėl turime kitų metodų, padedančių kurti skirtingas animacijas, šiuo atveju kalbame apie išblukti Y skaidrę kurie atitinka blukimą ir slydimą, kai pirmasis turi tokį poveikį, kaip atrodo, o antrasis slenka nuo ekrano krašto arba elemento talpyklos.
Toliau pateiktame sąraše pamatysime jo atitikmenis Rodyti() ir paslėpti ():
fadeIn () ir slideIn ()Jie atitinka elementų rodymo efektus, tai yra, yra lygiaverčiai Rodyti().
fadeOut ir slideOut ()Jie atitinka elementų slėpimo efektus, tai yra, yra lygiaverčiai paslėpti ().
fadeToggle () ir slideToggle ()Yra trečias atvejis, kuris atitinka jungiklio tipo efektus ir yra lygiavertis perjungti ().
Atlikdami pratimą, leidžiame dar kartą peržiūrėti pavyzdžius, tačiau naudojant šiuos naujus metodus, kad galėtumėte iš pirmų lūpų pamatyti, kaip jie veikia.
Baigę šią pamoką, mes išmokome subtiliai ir protingai pagyvinti savo elementus, svarbu nepiktnaudžiauti šiais efektais, kad animacijos laikas būtų labai ilgas, nes mes pasieksime erzinti vartotoją ir atidėti savo darbą, prisimindami, kad visų pirma privalome išlaikyti tinkamumą naudoti.