Implementere animasjoner med jQuery

De animerte effektene i jQuery De er ikke animasjonene vi kjenner, det vil si at vi ikke skal gi bevegelse til en tegning, det er viktig å presisere dette, da det kan føre til forvirring. Disse animerte effektene refererer til måten overgangene av elementer genereres i SOL, et element som kan bevege seg sakte fra et hjørne av nettleseren eller forsvinne og bryte i tusenvis av stykker.
Ved første øyekast kan det virke som om de er nyttige for oss, til slutt hvis vi vil at et element skal vises eller forsvinne, kan det ikke ha betydning for oss hvordan det skjer, men for de som studerer oppførselen til brukergrensesnitt Dette er veldig viktig, da det kan sette brukerens stemning eller vises som en subtil måte å gjøre det visuelle noe mer tiltalende.
Det er selvfølgelig de som misbruker og overdriver i bruk av animerte effekter og overbelaster grensesnittet så mye at det blir tungt eller upålitelig og får brukeren til å lide under bruk av systemet, det er derfor det er nødvendig å ha et minimum av samvittighet og måte når du bruker denne typen effekter.
Det er viktig å vite at de forskjellige typer animasjoner De har en rekke alternativer som kan kontrolleres fra samtalen vi foretar, vi kan kontrollere varigheten, slik at vi kan kalibrere om effekten påvirker brukervennligheten eller ikke, og hvis det kan være detaljert og oppnå ønsket effekt, avhengig av tiden det varer kan også indikere funksjonen eller metoden som skal utføres i Ring tilbake på slutten av animasjonen, for eksempel hvis vi får en knapp til å forsvinne når den ikke lenger er der, utføres en metode som deretter sender brukeren en melding.
Et annet alternativ vi har er å bestå a objektkart der vi definerer de avanserte eller eksklusive alternativene for den animerte effekten vi bruker, men dette er mest av alt når vi ønsker å gjøre noe veldig spesifikt og avansert. Syntaksen for bruk av disse alternativene er som følger:

 $ (velger). effekt (varighet); $ (velger). effekt (varighet, tilbakeringingsfunksjon); $ (velger) .effect (functionCallBack); $ (velger) .effect (mapObjects); 

Når vi ser at hver linje tilsvarer hver av de mulige variasjonene vi kan bruke i standardanimasjoner, er det mulig at noen animasjoner har en spesiell egenskap, men i de som vi vil se i denne opplæringen vil vi jobbe med dette.
En av de mest brukte og mest nyttige effektene vi kan tenke på er å vise og skjule elementer, og det viser seg også at de er ganske enkle effekter å implementere, det er derfor vi skal bruke dem som et eksempel.
vis () og skjul ()Metodene som lar oss nå disse målene er Vise fram() Y gjemme seg (), ettersom vi ser at navnene deres på engelsk samsvarer med handlingen, viser for det første og skjuler for det andre, kan disse brukes på ethvert element i vårt SOL, så de er ganske praktiske og nyttige.
Vi skal lage en liten animasjon der vi skal bruke varigheten og samtalen til en funksjon Ring tilbake på tidspunktet for utførelsen, vil vi bruke effektene Vise fram() Y gjemme seg () og slik kan vi lære hvordan disse brukes.
I den følgende koden ser vi hvordan vi i utgangspunktet inkluderer biblioteket jQuery fra en av CDN tilstrekkelig, med dette unngår vi å måtte lagre det lokalt, og dermed vil vi dra nytte av nettleserens buffer.
Deretter definerer vi to blokker navngitt element 1 Y element2 henholdsvis, hvor den første er skjult og den andre synlig, og til slutt har vi en knapp som sier start som vi bruker på klikkhendelsen som utfører funksjonen oppmuntre().
Funksjonen oppmuntre() bruk først animasjonen Vise fram() til element 1 og gir den en verdi på 1000 milli-sekunder som er lik 1 sekund, og til dette legger vi til a Ring tilbake der vi bruker effekten gjemme seg () vårt element2 og genererer en melding per konsoll.
Inne i animasjonen gjemme seg () hva søker vi på element2 vi opprettet en Ring tilbake hvor vi også vil skrive en melding etter konsoll. Så la oss se på koden for vårt første eksempel:

 Animasjoner
Dette er vårt første skjulte element

Klikk på knappen for å kjøre animasjonen
Start 

La oss se hvordan det ser ut i nettleseren vår, i det neste bildet vil vi se HTML La oss se på hvordan element 1 ikke vist:

Nå i det følgende bildet vil vi se hva som skjer etter å ha klikket på knappen Start, vil vi legge merke til at nå ser vi det skjulte elementet, og i konsollen vil vi ha to meldinger, hvis de gjør eksemplet live, vil de også se hvordan det ene elementet vises først og et sekund senere forsvinner det andre:

På en enkel måte har vi gitt liv til å vise og skjule elementene i dokumentet vårt HTML.
Det er tider når vi vil at en knapp skal fungere som en bryter, som viser og skjuler et element eller en gruppe elementer, selv om dette er enkelt å gjøre ved å evaluere tilstander og bruke metodene Vise fram() Y gjemme seg (), sannheten er at vi ville generere for mye kode for noe så enkelt, det er derfor teamet til jQuery de tenkte på det, og de gir oss metoden veksle ().
Hva gjør metoden toggle ()?Hva denne metoden gjør, er å evaluere elementets nåværende tilstand, og hvis den er synlig, skjuler den den, og hvis den er skjult, viser den den, som indikert av brytertypeadferden. Det beste er at til denne metoden kan vi legge til de forskjellige animasjonsalternativene, med varighet og mulighet for å gjøre det Ring tilbake.
La oss nå bygge et eksempel hvor vi praktiserer det vi har lært om toggle () -metoden, la oss se koden nedenfor:

 Animasjoner
Resultatet av utførelsen av toggle () -effekten.

Start 

I den følgende koden vil vi se hvordan vi har opprettet en div kalt element 1 som i utgangspunktet er skjult, så har vi en knapp Start som når du klikker vil kalle den animerte funksjonen, vil den ha metoden veksle () brukt på elementet, og i første omgang vil det vises og vise en melding per konsoll.
La oss se den opprinnelige tilstanden til denne koden etter nettleser, vi vil legge merke til at vi bare har knappen og det er ingenting i konsollen:

La oss nå se hvordan det skjulte elementet vises og gjenspeiler meldingen til oss gjennom konsollen når du klikker på knappen:

Til slutt, hvis vi klikker på knappen igjen, blir elementet skjult og meldingen gjentas i konsollen, noe vi merker når vi ser nummeret tre ved siden av, som angir hvor mange ganger hendelsen har blitt utløst.

Ja OK Vise fram() Y gjemme seg () De er effektive, de kan virke litt enkle ved første øyekast, derfor har vi andre metoder som hjelper oss å lage forskjellige animasjoner, i dette tilfellet snakker vi om falme Y lysbilde som tilsvarer fading og gliding, hvor den første har en effekt som å vises og den andre glir fra en kant av skjermen eller beholderen til elementet.
La oss se i den følgende listen dens ekvivalenter til Vise fram() og til gjemme seg ():
fadeIn () og slideIn ()De tilsvarer effektene for å vise elementer, det vil si at de tilsvarer Vise fram().
fadeOut og slideOut ()De tilsvarer effektene for å skjule elementer, det vil si at de tilsvarer gjemme seg ().
fadeToggle () og slideToggle ()Det er et tredje tilfelle, og det er det som tilsvarer switch-type effekter og de tilsvarer veksle ().
Som en øvelse lar vi deg gå gjennom eksemplene igjen, men ved å bruke disse nye metodene, slik at du kan se førstehånds hvordan de fungerer.
Med dette fullfører vi denne opplæringen, vi har lært å animere elementene våre på en subtil og intelligent måte, det er viktig å ikke misbruke disse effektene for å plassere veldig lange animasjonstider, siden det vi vil oppnå er å irritere brukeren og forsinke arbeidet sitt og huske at vi må opprettholde brukervennligheten fremfor alt annet.