Dette innlegget vil forklare den praktiske implementeringen av jQuerys fadeOut()-metode for å lage en jevn uttoningseffekt.
Hvordan lage jevne fade-out-effekter ved å bruke jQuerys fadeOut()-metode?
jQuery sin ' fadeOut() ”-metoden skjuler det valgte elementet gradvis ved å redusere opasiteten. Denne metoden endrer det valgte elementets tilstand fra synlig til skjult. Det skjulte elementet vises ikke på nettsiden før brukeren viser det igjen ved å bruke ' fadeIn() 'metoden.
Syntaks
$ ( velger ) . fade ut ( hastighet, lettelser, tilbakeringing ) ;
Syntaksen ovenfor støtter følgende valgfrie parametere for å tilpasse uttoningseffekten:
- hastighet: Den spesifiserer hastigheten på fading-effekten i millisekunder. Som standard er verdien '400ms'. Dessuten støtter den også to innebygde verdier 'sakte' og 'rask'.
- lettelser: Den viser den falme animasjonshastigheten på forskjellige punkter. Som standard er verdien 'sving (langsommere ved start/slutt, og sakte ved midten)'. I tillegg fungerer det også på 'lineær (konstant hastighet i falming animasjon)'.
- Ring tilbake: Den definerer en brukerdefinert funksjon som kjøres etter å ha fullført fading-animasjonen for å utføre den definerte oppgaven.
La oss bruke den ovenfor definerte metoden praktisk talt.
HTML-kode
Før du går videre til 'fadeOut()'-metoden, se på følgende HTML-kode som lager et eksempel 'div'-element som fade-out-effekten skal utføres på:
< knapp > fadeOut ( Gjemme seg Element ) knapp >< br >< br >< div id = 'myDiv' stil = 'høyde: 80px; bredde: 300px; kantlinje: 2px helt svart; marg: auto; tekstjustering: senter' >
< h2 > Velkommen til Linuxhint h2 >
div >
I kodelinjene ovenfor:
- «
”-taggen legger til et knappeelement. - « '-taggen oppretter et div-element med en id 'myDiv', og styles ved hjelp av følgende stilegenskaper (høyde, bredde, kantlinje, margin, tekstjustering).
- Inne i div, ' ”-taggen spesifiserer det første underoverskriftselementet på nivå 2.
Begynn nå med det første eksemplet.
Eksempel 1: Lag jevne uttoningseffekter med standardverdi for fadeOut().
Det første eksemplet skjuler det matchede div-elementet ved å bruke 'fadeOut()'-metoden med standardverdien '400ms':
< manus >
$ ( dokument ) . klar ( funksjon ( ) {
$ ( 'knapp' ) . klikk ( funksjon ( ) {
$ ( '#myDiv' ) . fade ut ( ) ;
} ) ;
} ) ;
manus >I kodelinjene ovenfor:
- For det første, ' klar() ”-metoden utfører de gitte funksjonene når gjeldende HTML-dokument/DOM er lastet.
- Deretter ' klikk() ”-metoden utfører den koblede funksjonen ved knappeklikk når den tilhørende “knappe”-velgeren klikkes.
- Etter det, ' fadeOut() ”-metoden skjuler det åpnede div-elementet hvis ID er “myDiv” i 400ms, dvs. standardverdien.
Produksjon
Det er observert at det gitte knappeklikket toner ut div-elementet gradvis i '400ms'.
Eksempel 2: Lag jevne fade-out-effekter med fadeOut() 'speed'-parameteren
Dette eksemplet bruker 'fadeOut()'-metoden med de innebygde verdiene (sakte/rask) til 'hastighet'-parameteren:
< manus >
$ ( dokument ) . klar ( funksjon ( ) {
$ ( 'knapp' ) . klikk ( funksjon ( ) {
$ ( '#myDiv' ) . fadeOut ( 'langsom' ) ;
} ) ;
} ) ;
manus >Nå, ' fadeOut() '-metoden passerer ' langsom ”-verdi som parameter for jevnt å skape uttoningseffekten, dvs. endrer den valgte div-elementtilstanden fra synlig til skjult.
Produksjon
Det kan sees at det valgte div-elementet gjemmer seg sakte på knappen klikk.
Eksempel 3: Lag jevne fade-out-effekter med fadeOut() 'duration'-parameteren
Dette eksemplet bruker 'fadeOut()'-metoden med et spesifikt antall millisekunder som varighetsparameter:
< manus >
$ ( dokument ) . klar ( funksjon ( ) {
$ ( 'knapp' ) . klikk ( funksjon ( ) {
$ ( '#myDiv' ) . fade ut ( 6000 ) ;
} ) ;
} ) ;
manus >Nå bruker 'fadeOut()'-metoden det spesifiserte antallet millisekunder for å skjule det matchede elementet i den gitte varigheten.
Produksjon
Utgangen ovenfor skjuler de gitte div-elementendringene ved et knappeklikk i et gitt tidsintervall.
Eksempel 4: Lag jevne fade-out-effekter med 'callback'-funksjonen fadeOut()
Dette eksemplet utfører en tilbakeringingsfunksjon når uttoningseffekten er fullført via 'fadeOut()'-metoden:
< manus >
$ ( dokument ) . klar ( funksjon ( ) {
$ ( 'knapp' ) . klikk ( funksjon ( ) {
$ ( '#myDiv' ) . fade ut ( 4000 , funksjon ( ) {
konsoll. Logg ( 'Gitt div-element er skjult med hell!' )
} ) ;
} ) ;
} ) ;
manus >I den angitte kodeblokken:
- « fadeOut() ” metoden toner ut det matchede div-elementet på et spesifikt antall millisekunder og utfører deretter den oppgitte “callback”-funksjonen.
- Inne i ' Ring tilbake '-funksjonen, ' console.log() ”-metoden brukes for å vise den spesifiserte setningen etter fullføringen av “fade-out”-effekten.
Produksjon
Det er sett at 'konsollen' viser en uttalelse definert i tilbakeringingsfunksjonen etter å ha skjult det gitte div-elementet.
Eksempel 5: Lag jevne fade-out-effekter med 'easing'-parameteren fadeOut()
Dette eksemplet bruker 'fadeOut()'-metoden med de mulige verdiene for 'easing'-parameteren:
< manus >
$ ( dokument ) . klar ( funksjon ( ) {
$ ( 'knapp' ) . klikk ( funksjon ( ) {
$ ( '#myDiv' ) . fade ut ( 4000 , 'lineær' ) ;
} ) ;
} ) ;
manus >Nå, ' fadeOut() ”-metoden utfører fade-out-effekten på et spesifikt antall millisekunder med konstant hastighet på grunn av ” lineær 'verdi.
Produksjon
Utgangen endrer den gitte elementtilstanden fra synlig til skjult med konstant hastighet. Det er det for å implementere 'fade-out'-effekten på elementet.
Konklusjon
For å lage en jevn uttoningseffekt ved å bruke jQuerys ' fadeOut() ”-metoden, krever ikke brukeren noen ekstra parameter. Denne metoden toner ut, dvs. skjuler elementet gradvis ved å endre opasiteten. Hvis brukeren trenger å utføre en uttoningseffekt i løpet av et spesifikt antall millisekunder, utfør en tilbakeringingsfunksjon og bruk deretter parameterne 'speed', 'easing' og 'callback' med 'fadeOut()'-metoden. Dette innlegget forklarte praktisk jQuerys fadeOut()-metode for å lage en jevn uttoningseffekt.