Animuoti „ jQuery“ efektai nėra animacija, kurią mes žinome, tai yra, mes nesiruošiame judėti piešimui, svarbu tai paaiškinti, nes tai gali sukelti painiavą. Šie animuoti efektai yra susiję su DOM elementų perėjimų generavimo būdu, kai elementas gali lėtai judėti iš navigatoriaus kampo arba išnykti suskaidydamas į tūkstančius vienetų.
Iš pirmo žvilgsnio gali atrodyti, kad jie mums yra naudingi, galų gale, jei norime, kad elementas atsirastų arba išnyktų, mums tai gali būti mažai svarbu, tačiau tiems, kurie tiria vartotojo sąsajų elgseną, tai yra labai svarbu, nes tai gali nustatyti Vartotojo humoras arba pasirodymas kaip subtilus būdas padaryti vaizdą patrauklesnį.
Aišku, kas piktnaudžiauja ir per daug naudojasi animaciniais efektais ir perkrauna sąsają, kuri tampa sunki ar nepatikima, ir privers vartotoją patirti naudojimąsi sistema, todėl jūs turite būti kuo mažiau informuoti ir saikingi. taikant šio tipo efektus.
Galimos animacijos parinktys
Svarbu žinoti, kad skirtingų tipų animacijos turi daugybę kontroliuojamų variantų nuo skambučio, kurį mes atliekame, mes galime kontroliuoti jų trukmę, kad galėtume sukalibruoti, ar efektas turi įtakos pritaikomumui, ar ne, ir ar jį galima detalizuoti atsižvelgiant į laiką, kurį jis trunka, ir Jei norite pasiekti norimą efektą, animacijos pabaigoje taip pat galime nurodyti funkciją ar metodą, kuris turėtų būti vykdomas atšaukiant telefoną, pavyzdžiui, jei paspausime mygtuką, kuris dingsta tuo metu, kai nebeveikia metodas, kuris vartotojui siunčia pranešimą. .
Kitas variantas, kurį turime, yra perduoti objektų žemėlapį, kuriame apibrėžtume išplėstines ar išskirtines animacinio efekto galimybes, kurias naudojame, tačiau dažniausiai tai yra tada, kai norime padaryti ką nors labai konkretaus ir tobulesnio. Šių parinkčių sintaksė yra tokia:
$ (selektorius) .effect (trukmė); $ (selektorius) .effect (trukmė, functionCallBack); $ (selektorius) .effect (functionCallBack); $ (selektorius) .effect (mapObjects);
Kadangi matome, kad kiekviena eilutė atitinka kiekvieną iš galimų variantų, kuriuos galime pritaikyti standartinėse animacijose, gali būti, kad kai kuri animacija turi savitą savybę, tačiau kokią nors šią anketą pamatysime mes su ja dirbsime.
Rodyti ir slėpti
Vienas iš labiausiai naudojamų ir naudingiausių efektų, apie kurį galime galvoti, yra parodyti ir paslėpti elementus, ir paaiškėja, kad jie yra gana paprasti efektai, todėl juos naudosime kaip pavyzdį.
parodyti () ir paslėpti ()
Metodai, kurie leidžia mums pasiekti šiuos tikslus, yra „ show“ () ir „ hide“ (), nes matome, kad jų vardai anglų kalba atitinka veiksmą, rodo pirmąjį ir slepia antrą, jie gali būti pritaikyti bet kuriam mūsų DOM elementui, Taigi jie yra gana praktiški ir naudingi.
Praktinis pavyzdys
Padarysime nedidelę animaciją, kurioje panaudosime trukmę ir skambutį į „ callBack“ funkciją, kai ją vykdysime, pritaikysime efektų rodymo () ir slėpimo () elementus, kad galėtume išmokti, kaip jie naudojami.
Toliau pateiktame kode matome, kaip pirmiausia tai, ką mes darome, yra įtraukti „ jQuery“ biblioteką iš vieno iš tinkamų CDN, todėl mes vengiame jos saugoti vietoje, taigi mes pasinaudosime naršyklės talpykla.
Tada mes apibrėžiame du blokus
atitinkamai pažymėti elementas1 ir elementas2, kur pirmasis paslėptas, o antrasis matomas, ir galiausiai turime mygtuką, kuriame sakoma pradžia, kurią mes naudojame jūsų paspaudimo įvykyje, kuri vykdo animuoti () funkciją .
Funkcija animuoti () pirmiausia taiko „ show ()“ animaciją 1 elementui ir gauna 1000 milijono sekundžių vertę, lygią 1 sekundei, ir prie to pridedame „ callBack“, kur savo elementui2 pritaikome paslėpimo () efektą ir generuoja pranešimą kiekvienoje konsolėje.
Paslėpdami () animaciją, kurią taikome elementui2, sukuriame „ callBack“, kur taip pat rašysime pranešimą pultu. Pažvelkime į mūsų pirmojo pavyzdžio kodą:
AnimacijosTai yra mūsų pradinis paslėptas elementas.
Norėdami įvykdyti animaciją, spustelėkite mygtuką
Pradėti funkciją animuoti () {$ ("# element1"). Rodyti (1000, function () {console.log ("show element1"); $ ("# element2"). Slėpti (1000, function () {console .log („slėpti elementą2“);});}); }
Pažiūrėkime, kaip ji atrodo mūsų naršyklėje, šiame paveikslėlyje matysime HTML prieš atlikdami bet kokį veiksmą, pažiūrėkime, kaip elementas1 nerodomas:
Dabar kitame paveikslėlyje pamatysime, kas nutinka paspaudus mygtuką Pradėti, pastebėsime, kad dabar matome paslėptą elementą ir konsolėje turėsime du pranešimus. Jei atliksite tiesioginį pavyzdį, pamatysite, kaip pirmiausia atsiranda elementas, o po sekundės jis išnyksta. kita:
Paprastu būdu mes suteikėme gyvybę parodyti ir paslėpti HTML dokumento elementus.
Perjungti matomas ir paslėptas būsenas
Kartais mes norime, kad mygtukas veiktų kaip jungiklis, rodantis ir slepiantis elementą ar elementų grupę, nors tai lengva padaryti įvertinant būsenas ir naudojant show () ir hide () metodus , tiesa ta, kad Mes sugeneruosime per daug ko nors tokio paprasto, todėl jQuery komanda apie tai pagalvojo ir pateikė mums perjungimo () metodą .
Ką veikia perjungimo () metodas?
Šis metodas yra skirtas įvertinti esamą elemento būseną ir, jei jis yra matomas, paslepia jį, o jei yra paslėptas, parodo, lygiai taip pat, kaip mes nurodome jungiklio tipo elgseną. Geriausia yra tai, kad prie šio metodo galime pridėti skirtingas animacijos parinktis su trukme ir galimybe skambinti .
$config[ads_text6] not foundĮdiekite perjungimo () metodą
Dabar sukurkime pavyzdį, kai pritaikysime tai, ką sužinojome apie perjungimo () metodą, pažiūrėkime žemiau esantį kodą:
AnimacijosRezultatas vykdant perjungimo () efektą.
Pradėti funkciją animuoti () {$ ("# element1"). Perjungti (1000, function () {console.log ("mes sukūrėme perjungimą!");}); }
Toliau pateiktame kode pamatysime, kaip mes sukūrėme div elementą, vadinamą elementu1, kuris iš pradžių yra paslėptas, tada mes turime pradžios mygtuką, kuris paspaudus paskambins animacinei funkcijai, šiam elementui bus pritaikytas perjungimo () metodas, o pirmiausia jis bus pasirodyti ir kiekvienoje konsolėje rodyti pranešimą.
Pažiūrėkime pradinę šio kodo būseną naršykle, pastebėsime, kad turime tik mygtuką ir konsolėje nieko nėra:
Dabar pažiūrėkime, kaip paspaudus mygtuką rodomas paslėptas elementas ir konsolėje pateikiamas pranešimas:
Galiausiai, jei dar kartą spustelėsime mygtuką, elementas bus paslėptas ir pranešimas bus pakartotas pulte, kurį pastebime pamatę šalia jo esantį numerį trys, nurodantį, kiek kartų įvykis suveikė.
Kitos animacijos elementams rodyti ir slėpti
Nors rodymas () ir slėpimas () yra veiksmingi, iš pirmo žvilgsnio jie gali atrodyti šiek tiek paprasti, todėl mes turime kitų metodų, kurie mums padeda kurti skirtingas animacijas, šiuo atveju mes kalbame apie išblukimą ir skaidrę, atitinkančią išblukimą ir stumdomas, kai pirmasis turi efektą, kaip atrodo, o antrasis slenka nuo ekrano krašto arba elemento talpyklos.
Pažiūrėkime kitame sąraše jo atitikmenis, kuriuos reikia parodyti () ir paslėpti ():
fadeIn () ir slideIn ()$config[ads_text6] not found
Jie atitinka efektus, skirtus parodyti elementus, tai yra, jie yra lygiaverčiai šou ().
„fadeOut“ ir „slideOut“ ()
Jie atitinka efektus, norint paslėpti elementus, tai yra, jie yra lygiaverčiai slėpti ().
fadeToggle () ir slideToggle ()
Yra trečias atvejis, kuris atitinka jungiklio tipo efektus ir yra lygus perjungimui ().
Kaip užduotį mes vėl leidome jums pateikti pavyzdžius, tačiau naudodamiesi šiais naujais metodais, kad galėtumėte iš anksto pamatyti, kaip jie veikia.
Pabaigus šį mokymą, mes išmokome subtiliai ir protingai animuoti savo elementus, svarbu nepiktnaudžiauti šiais efektais, uždedant labai ilgą animacijos laiką, nes mes pasieksime erzinti vartotoją ir atidėti jo darbą, prisimindami, kad visų pirma turime išlaikyti naudojimą.
Straipsnis