Animāciju ieviešana ar jQuery

Animētie efekti jQuery Tās nav animācijas, kuras mēs zinām, tas ir, mēs nedosim kustību zīmējumam, ir svarīgi to precizēt, jo tas var radīt neskaidrības. Šie animētie efekti attiecas uz veidu, kādā tiek ģenerētas elementu pārejas SAULE, elements var lēnām pārvietoties no pārlūka stūra vai pazust, sadaloties tūkstošiem gabalu.
No pirmā acu uzmetiena var šķist, ka tie mums ir noderīgi, galu galā, ja mēs vēlamies, lai kāds elements parādās vai pazūd, mums var nebūt svarīgi, kā tas notiek, tomēr tiem, kas pēta lietotāja saskarnes Tas ir ļoti svarīgi, jo tas var iestatīt lietotāja noskaņojumu vai tikt parādīts kā smalks veids, kā padarīt vizuālo nedaudz pievilcīgāku.
Protams, ir tie, kas ļaunprātīgi izmanto un pārspīlē animēto efektu izmantošanu un pārslogo saskarni tik ļoti, ka kļūst smags vai neuzticams un liek lietotājam ciest, lietojot sistēmu, tāpēc ir nepieciešama minimāla sirdsapziņa un mērenību, piemērojot šāda veida efektus.
Ir svarīgi zināt, ka atšķirīgs animācijas veidi Viņiem ir vairākas kontrolējamas iespējas no mūsu veiktā zvana, mēs varam kontrolēt tā ilgumu, lai mēs varētu kalibrēt, vai efekts ietekmē lietojamību vai ne, un ja atkarībā no tā ilguma to var detalizēt un sasniegt vēlamo efektu, un var arī norādīt funkciju vai metodi, kas jāizpilda atzvani animācijas beigās, piemēram, ja poga pazūd, kad tās vairs nav, tiek izpildīta metode, kas pēc tam nosūta lietotājam ziņojumu.
Vēl viena mūsu iespēja ir iziet a objektu karte kurā mēs definējam mūsu izmantotā animētā efekta uzlabotās vai ekskluzīvās iespējas, tomēr tas ir vissvarīgākais, ja vēlamies darīt kaut ko ļoti specifisku un progresīvu. Šo opciju izmantošanas sintakse ir šāda:

 $ (atlasītājs) .efekts (ilgums); $ (atlasītājs) .efekts (ilgums, atzvanīšanas funkcija); $ (atlasītājs) .effect (functionCallBack); $ (atlasītājs) .efekts (mapObjects); 

Tā kā mēs redzam, ka katra rinda atbilst visām iespējamām variācijām, kuras mēs varam izmantot standarta animācijās, iespējams, ka kādai animācijai ir kāda īpaša iezīme, tomēr tajās, kuras mēs redzēsim šajā apmācībā, mēs ar to strādāsim.
Viens no visbiežāk izmantotajiem un visnoderīgākajiem efektiem, ko mēs varam iedomāties, ir elementu parādīšana un slēpšana, kā arī izrādās, ka tie ir diezgan vienkārši īstenojami efekti, tāpēc mēs tos izmantosim kā piemēru.
rādīt () un slēpt ()Metodes, kas ļauj mums sasniegt šos mērķus, ir Rādīt () Y slēpt (), tā kā mēs redzam, ka viņu vārdi angļu valodā atbilst darbībai, rāda pirmajam un slēpj otro, tos var attiecināt uz jebkuru mūsu elementu SAULE, tāpēc tie ir diezgan praktiski un noderīgi.
Mēs izveidosim nelielu animāciju, kurā izmantosim ilgumu un funkcijas izsaukumu atzvani izpildes laikā mēs piemērosim efektus Rādīt () Y paslēpt () un tāpēc mēs varam uzzināt, kā tās tiek izmantotas.
Nākamajā kodā mēs redzam, kā vispirms mēs iekļaujam bibliotēku jQuery no viena no CDN adekvāti, tāpēc mums nav jāglabā lokāli, un tādējādi mēs izmantosim pārlūkprogrammas kešatmiņas priekšrocības.
Tad mēs definējam divus blokus nosaukts 1. postenis Y elements2 attiecīgi, kur pirmais ir paslēpts, bet otrais ir redzams, un visbeidzot mums ir poga, kas saka sākumu, uz kuru mēs attiecināmies savā klikšķa notikumā, kas izpilda funkciju iedrošināt ().
Funkcija iedrošināt () vispirms izmantojiet animāciju Rādīt () uz 1. postenis un piešķir tai vērtību 1000 milisekundes, kas ir vienāda ar 1 sekundi, un tam mēs pievienojam a atzvani kur mēs pielietojam efektu paslēpt () mūsējais elements2 un ģenerē ziņojumu katrā konsolē.
Animācijas iekšpusē paslēpt () uz ko mēs attiecināmies elements2 mēs izveidojām a atzvani kur mēs arī rakstīsim ziņojumu ar konsoles palīdzību. Apskatīsim pirmā piemēra kodu:

 Animācijas
Tas ir mūsu sākotnējais slēptais elements

Lai palaistu animāciju, noklikšķiniet uz pogas
Sākt 

Tagad redzēsim, kā tas izskatās mūsu pārlūkprogrammā, nākamajā attēlā mēs redzēsim HTML Pirms jebkuru darbību veikšanas apskatīsim, kā 1. postenis nav parādīts:

Tagad nākamajā attēlā mēs redzēsim, kas notiek pēc noklikšķināšanas uz pogas Sākt, mēs pamanīsim, ka tagad mēs redzam slēpto elementu, un konsolē mums būs divi ziņojumi, ja viņi rādīs piemēru tiešraidē, viņi redzēs arī to, kā vispirms parādās viens elements, bet pēc otra otrs pazūd:

Vienkāršā veidā mēs esam piešķīruši dzīvību mūsu dokumenta elementu parādīšanai un slēpšanai HTML.
Dažreiz mēs vēlamies, lai poga darbotos kā slēdzis, parādot un slēpjot elementu vai elementu grupu, lai gan to ir viegli izdarīt, novērtējot stāvokļus un izmantojot metodes Rādīt () Y slēpt (), patiesība ir tāda, ka mēs ģenerētu pārāk daudz koda kaut kam tik vienkāršam, tāpēc komanda jQuery viņi par to domāja un sniedz mums metodi pārslēgt ().
Ko dara pārslēgšanas () metode?Šī metode novērtē elementa pašreizējo stāvokli un tādējādi, ja tas ir redzams, tas to slēpj un, ja tas ir paslēpts, tas to parāda, kā to norāda slēdža tipa uzvedība. Labākais ir tas, ka šai metodei mēs varam pievienot dažādas animācijas iespējas ar ilgumu un iespēju to darīt atzvani.
Tagad izveidosim piemēru, kurā mēs praktiski īstenosim to, ko esam iemācījušies par toggle () metodi, apskatīsim tālāk redzamo kodu:

 Animācijas
Pārslēgšanas () efekta izpildes rezultāts.

Sākt 

Nākamajā kodā mēs redzēsim, kā mēs esam izveidojuši div ar nosaukumu 1. postenis kas sākotnēji ir paslēpts, tad mums ir poga Sākt kurai noklikšķinot tiks izsaukta funkcija animēt, tai būs metode pārslēgties () tiek piemērots elementam, un vispirms tas parādīsies un parādīs ziņojumu katrā konsolē.
Apskatīsim šī koda sākotnējo stāvokli pārlūkprogrammā, mēs pamanīsim, ka mums ir tikai poga, un konsolē nav nekā:

Tagad redzēsim, kā, noklikšķinot uz pogas, parādās slēptais elements un tas atspoguļo ziņojumu, kas mums tiek nosūtīts caur konsoli:

Visbeidzot, ja mēs vēlreiz noklikšķināsim uz pogas, elements tiks paslēpts un ziņojums tiks atkārtots konsolē, ko mēs pamanām, kad redzam numuru trīs blakus tam, kas norāda, cik reizes notikums ir aktivizēts.

Jā, labi Rādīt () Y paslēpt () Tie ir efektīvi, no pirmā acu uzmetiena tie var šķist nedaudz vienkārši, tāpēc mums ir citas metodes, kas palīdz mums izveidot dažādas animācijas, šajā gadījumā mēs runājam par izbalināt Y slidkalniņš kas atbilst izbalēšanai un slīdēšanai, ja pirmajam ir tāds efekts kā parādīšanās, bet otrajam slīd no ekrāna malas vai elementa konteinera.
Apskatīsim nākamajā sarakstā tā ekvivalentus Rādīt () un uz slēpt ():
fadeIn () un slideIn ()Tie atbilst elementu parādīšanas efektiem, tas ir, tie ir līdzvērtīgi Rādīt ().
fadeOut un slideOut ()Tie atbilst elementu slēpšanas efektiem, tas ir, tie ir līdzvērtīgi slēpt ().
fadeToggle () un slideToggle ()Ir trešais gadījums, un tas ir tas, kas atbilst slēdža tipa efektiem un ir līdzvērtīgs pārslēgt ().
Kā vingrinājums mēs ļaujam jums vēlreiz izlasīt piemērus, taču izmantojot šīs jaunās metodes, lai jūs varētu uzreiz redzēt, kā tās darbojas.
Pabeidzot šo apmācību, mēs esam iemācījušies smalki un saprātīgi animēt savus elementus, tāpēc ir svarīgi ļaunprātīgi neizmantot šos efektus, novietojot ļoti garus animācijas laikus, jo mēs sasniegsim lietotāja kaitināšanu un aizkavēt savu darbu, atceroties, ka mums vispirms ir jāsaglabā lietojamība.