jQuery Succinctly jQuery Effects

Deaktiver alle jQuery-effektmetoder

Det er mulig å deaktivere alle animasjonsmetodene jQuery gir ved å bare sette verdien av av eiendom til ekte.

    
Prøv å animere meg!

Når av er satt til ekte, alle effektmetoder vil ikke animere og vil i stedet bli skjult og vist umiddelbart ved hjelp av CSS-reglene display: none og display: block. Du kan slå animasjonen på igjen ved å passere av eiendom a falsk verdi.

    
Prøv å animere meg!

Grokking Stopp () Animasjonsmetode

Det er ofte nødvendig å stoppe en animasjon som er i gang før du starter en annen. For eksempel, når du bruker tilpasset mouseenter og mouseleave hendelser (eller sveve() metode), kan du utilsiktet utløse et element som allerede animerer på grunn av en tidligere mouseenter eller mouseleave begivenhet. Dette fører til en opphopning av kø animasjoner, noe som resulterer i et svakt grensesnitt. For å unngå dette, bruk bare Stoppe() metode for å stoppe den nåværende animasjonen før du starter en ny.

    
Hold meg over meg!

Fjern Stoppe() metoder fra koden og rull musen over elementet flere ganger for å se spøkelsesanimasjoner oppstå. Fortsatt rullende over elementet på siden vil resultere i animasjonsoppbygging, som vanligvis ikke er det ønskede resultatet.

Merknader: I tillegg er det mulig å ikke bare stoppe den nåværende animasjonen i køen for valgelementet, men også hele køen ved å passere Stoppe() Metode en parameter av ekte. Dette vil effektivt stoppe alle kø animasjoner, aktive og inaktive.


Bestemme om et element er animert ved hjelp av: animert

Tollen : animert velgfilter kan brukes til å velge elementer som for øyeblikket animerer. Nedenfor bruker jeg dette egendefinerte velgeren filter for å legge til tekst til en animasjon

element.

    

Bruk show (), skjul (), og veksle (), uten animasjon

Bruker vise fram(), gjemme seg(), og veksle() metoder med en parameter vil føre til at elementene blir vist eller skjult for å animere ved å endre CSS egenskaper: høyde, bredde, opasitet, margin, polstring. Det er mulig å hoppe over animasjoner for å gjemme og vise elementer ved ikke å oversende noen parametere. Dette endrer hvordan disse metodene justerer synligheten til et element. Berørte elementer vil enkelt vises eller forsvinne uten animasjon ved å justere CSS vise eiendom i stedet.

       
Klikk meg (skjul animasjon)
Klikk meg (skjul ingen animasjon)

Merknader: JQuery-metodene gjemme seg(), vise fram(), veksle(), skli opp(), Skli ned(), slideToggle (), når det brukes på elementer som har en CSS vise verdien av på linje, vil bli endret til display: block i løpet av animasjonen.


Grokking sekvensielle og ikke-sekvensielle animasjoner

Det er viktig å forstå forskjellen mellom animasjoner som skjer samtidig, og animasjoner som forekommer i en sekvensiell rekkefølge over tid. Som standard, når effektmetoder er koblet, blir de lagt til i kø, og hver effekt oppstår etter hverandre.

    
Animere meg!
Animere meg!

Bruker animere () metode kan du angi animasjoner som ikke forekommer sekvensielt eller samtidig ved å overføre alle CSS-egenskapsendringene til en enkelt animere () metodeanrop. I koden under, er

vil animere bredden og grensen til venstre bredde samtidig.

    
Animere meg!

Animate () er Base, Low Level Abstraction

De animere () Metoden er basismetoden som brukes til å konstruere alle forhåndsdefinerte animasjoner, f.eks. gjemme seg(), Skli ned(). Det gir muligheten til å endre (over tid) verdiene av stilegenskaper.

Her er det du trenger å vite når du bruker denne metoden.

  • Bare egenskaper som tar numeriske verdier, støttes. Med andre ord kan du ikke animere verdien av, si, bakgrunnsfarge eiendom (i hvert fall ikke uten et plugin). Også egenskaper som tar mer enn en verdi som backgroundPosition kan ikke animeres.
  • Du kan animere CSS egenskaper ved å bruke em og% der det er aktuelt.
  • Relative animasjoner kan spesifiseres med "+ =" eller "- =" foran eiendomsverdien. Dette vil for eksempel flytte et element positivt eller negativt i forhold til dets nåværende stilling.
  • Hvis du angir en animasjonsvarighet på 0, vil animasjonen umiddelbart sette elementene til sluttstatus.
  • Som en snarvei, hvis en verdi på veksle er bestått, vil en animasjon bare vende fra hvor den er og animere til den enden.
  • Alle CSS egenskaper settes via en enkelt animere () Metoden vil animere på samme tid.

Grokking jQuery Fading Methods

Tre konsepter må utropes når du bruker fadeIn (), fadeout (), og fadeTo () fremgangsmåter.

  • I motsetning til andre effektmetoder justerer fading-metoder bare opaktheten til et element. Det antas at når du bruker disse effektmetodene at et element som ble bleknet, har det allerede en høyde og bredde.
  • Fading animasjoner vil fade elementer fra deres nåværende opasitet.
  • Bruker fadeout () Metoden vil fade et element fra dets nåværende opasitet, og da en gang 100% falmet, vil det endre elementets CSS displayegenskap til "ingen".

Hvert av de nevnte punktene er illustrert i koden nedenfor.