Implementering af animationer med jQuery

De animerede effekter i jQuery Det er ikke de animationer, vi kender, det vil sige, at vi ikke vil give bevægelse til en tegning, det er vigtigt at præcisere dette, da det kan føre til forvirring. Disse animerede effekter refererer til den måde, hvorpå elementernes overgange genereres inden for SOL, et element, der kan bevæge sig langsomt fra et hjørne af browseren eller forsvinde og bryde i tusinder af stykker.
Ved første øjekast kan det se ud til, at de er nyttige for os, i sidste ende, hvis vi vil have et element til at dukke op eller forsvinde, er det måske ikke ligegyldigt for os, hvordan det sker, men for dem, der studerer adfærden hos brugergrænseflader Dette er meget vigtigt, da det kan sætte brugerens stemning eller blive vist som en subtil måde at gøre det visuelle noget mere tiltalende.
Der er selvfølgelig dem, der misbruger og overdriver i brugen af ​​animerede effekter og overbelaster grænsefladen så meget, at det bliver tungt eller upålideligt og får brugeren til at lide under brug af systemet, derfor er det nødvendigt at have et minimum af samvittighed og mådehold, når du anvender disse typer effekter.
Det er vigtigt at vide, at de forskellige typer animationer De har en række kontrollerbare muligheder fra det opkald, vi foretager, vi kan styre dets varighed, så vi kan kalibrere, om effekten påvirker brugervenligheden eller ej, og hvis det afhængigt af den tid, det varer, kan det være detaljeret og opnå den ønskede effekt, og vi kan også angive den funktion eller metode, der skal udføres i ring tilbage i slutningen af ​​animationen, for eksempel hvis vi får en knap til at forsvinde, når den ikke længere er der, udføres en metode, der derefter sender brugeren en besked.
En anden mulighed, vi har, er at bestå en objektkort hvor vi definerer de avancerede eller eksklusive muligheder for den animerede effekt, som vi bruger, men dette er mest af alt, når vi vil gøre noget meget specifikt og avanceret. Syntaksen for at bruge disse muligheder er som følger:

 $ (vælger). effekt (varighed); $ (vælger). effekt (varighed, tilbagekaldsfunktion); $ (vælger) .effect (functionCallBack); $ (vælger). effekt (mapObjects); 

Da vi ser, at hver linje svarer til hver af de mulige variationer, vi kan anvende i standardanimationer, er det muligt, at nogle animationer har en særlig egenskab, men i dem, som vi vil se i denne vejledning, vil vi arbejde med dette.
En af de mest brugte og mest nyttige effekter, vi kan tænke på, er at vise og skjule elementer, og det viser sig også, at det er ganske enkle effekter at implementere, derfor vil vi bruge dem som et eksempel.
vis () og skjul ()De metoder, der giver os mulighed for at nå disse mål, er At vise() Y skjule (), da vi ser deres navne på engelsk svare til handlingen, viser for det første og skjuler for det andet, kan disse anvendes på ethvert element i vores SOL, så de er ganske praktiske og nyttige.
Vi skal lave en lille animation, hvor vi skal bruge varigheden og opkaldet til en funktion ring tilbage på tidspunktet for udførelsen, vil vi anvende effekterne At vise() Y skjule () og så kan vi lære, hvordan disse bruges.
I den følgende kode ser vi, hvordan vi i første omgang omfatter biblioteket jQuery fra en af CDN tilstrækkelig, med dette undgår vi at skulle gemme det lokalt, og derfor vil vi drage fordel af browserens cache.
Derefter definerer vi to blokke som hedder element 1 Y element2 henholdsvis, hvor den første er skjult og den anden synlig og endelig har vi en knap, der siger start, som vi anvender i sin klikhændelse, der udfører funktionen tilskynde().
Funktionen tilskynde() anvend først animationen At vise() til element 1 og giver den en værdi på 1000 milli-sekunder, som er lig med 1 sekund, og til dette tilføjer vi en ring tilbage hvor vi anvender effekten skjule () vores element2 og genererer en besked pr. konsol.
Inde i animationen skjule () hvad søger vi på element2 vi skabte en ring tilbage hvor vi også vil skrive en besked efter konsol. Så lad os se på koden til vores første eksempel:

 Animationer
Dette er vores første skjulte element

Klik på knappen for at køre animationen
Start 

Lad os nu se, hvordan det ser ud i vores browser, i det næste billede vil vi se HTML Før vi udfører en handling, lad os se på, hvordan element 1 ikke vist:

Nu i det følgende billede vil vi se, hvad der sker efter at have klikket på knappen Start, vil vi bemærke, at nu ser vi det skjulte element, og i konsollen vil vi have to meddelelser, hvis de gør eksemplet live, vil de også se, hvordan det ene element vises først og et sekund senere det andet forsvinder:

På en enkel måde har vi givet liv til at vise og skjule elementerne i vores dokument HTML.
Der er tidspunkter, hvor vi vil have en knap til at fungere som en switch, der viser og skjuler et element eller en gruppe af elementer, selvom det er let at gøre ved at evaluere tilstande og bruge metoderne At vise() Y skjule (), sandheden er, at vi ville generere for meget kode til noget så simpelt, det er derfor teamet af jQuery de tænkte over det, og de giver os metoden skifte ().
Hvad gør metoden toggle ()?Hvad denne metode gør, er at evaluere elementets nuværende tilstand, og hvis det er synligt, skjuler det det, og hvis det er skjult, viser det det, som det fremgår af switch-type adfærd. Det bedste er, at vi til denne metode kan tilføje de forskellige animationsmuligheder med varighed og mulighed for at gøre det ring tilbage.
Lad os nu bygge et eksempel, hvor vi omsatte det, vi har lært om toggle () -metoden, i praksis, lad os se koden herunder:

 Animationer
Resultatet af udførelsen af ​​toggle () -effekten.

Start 

I den følgende kode vil vi se, hvordan vi har oprettet en div kaldet element 1 som i første omgang er skjult, så har vi en knap Start som ved klik vil kalde den animerede funktion, vil den have metoden skifte () anvendt på elementet, og i første omgang vises det og viser en meddelelse pr. konsol.
Lad os se den oprindelige tilstand af denne kode ved browser, vi vil bemærke, at vi kun har knappen, og der ikke er noget i konsollen:

Lad os nu se, hvordan det skjulte element vises og afspejler meddelelsen til os via konsollen, når du klikker på knappen:

Endelig, hvis vi klikker på knappen igen, vil elementet blive skjult, og meddelelsen vil blive gentaget i konsollen, hvilket vi bemærker, når vi ser nummeret tre ved siden af, hvilket angiver, hvor mange gange hændelsen er blevet udløst.

Ja OK At vise() Y skjule () De er effektive, de kan virke lidt enkle ved første øjekast, derfor har vi andre metoder, der hjælper os med at lave forskellige animationer, i dette tilfælde taler vi om falme Y glide som svarer til fading og gliding, hvor den første har en effekt som at se ud, og den anden glider fra en kant af skærmen eller elementets beholder.
Lad os se i den følgende liste dens ækvivalenter til At vise() og til skjule ():
fadeIn () og slideIn ()De svarer til effekterne for at vise elementer, det vil sige, at de svarer til At vise().
fadeOut og slideOut ()De svarer til effekterne for at skjule elementer, det vil sige, at de svarer til skjule ().
fadeToggle () og slideToggle ()Der er et tredje tilfælde, og det er det, der svarer til switch-type effekter, og de svarer til skifte ().
Som en øvelse lader vi dig gennemgå eksemplerne igen, men ved hjælp af disse nye metoder, så du kan se førstehånds, hvordan de fungerer.
Med dette afslutter vi denne vejledning, vi har lært at animere vores elementer på en subtil og intelligent måde, det er vigtigt ikke at misbruge disse effekter for at placere meget lange animationstider, da det vi vil opnå er at irritere brugeren og forsinke deres arbejde og huske på, at vi skal bevare brugervenligheden frem for alt andet.