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!
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.
Tollen Bruker Merknader: JQuery-metodene 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. Bruker De Her er det du trenger å vite når du bruker denne metoden. Tre konsepter må utropes når du bruker Hvert av de nevnte punktene er illustrert i koden nedenfor.: 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
Bruk show (), skjul (), og veksle (), uten animasjon
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.
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
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
Animate () er Base, Low Level Abstraction
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.
bakgrunnsfarge
eiendom (i hvert fall ikke uten et plugin). Også egenskaper som tar mer enn en verdi som backgroundPosition
kan ikke animeres.veksle
er bestått, vil en animasjon bare vende fra hvor den er og animere til den enden.animere ()
Metoden vil animere på samme tid.
Grokking jQuery Fading Methods
fadeIn ()
, fadeout ()
, og fadeTo ()
fremgangsmåter.
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"
.