Dette indlæg vil forklare den praktiske implementering af jQuerys fadeOut() metode til at skabe en jævn udtoningseffekt.
Hvordan oprettes glatte fade-out-effekter ved hjælp af jQuerys fadeOut()-metode?
jQuery's ' svinde bort() ” metode skjuler det valgte element gradvist ved at mindske dets opacitet. Denne metode ændrer det valgte elements tilstand fra synlig til skjult. Det skjulte element vises ikke på websiden, før brugeren viser det igen ved hjælp af ' fadeIn() ” metode.
Syntaks
$ ( vælger ) . svinde bort ( hastighed, lempelse, tilbagekald ) ;
Ovenstående syntaks understøtter følgende valgfri parametre for at tilpasse fade-out-effekten:
- fart: Det angiver hastigheden af fading-effekten i millisekunder. Som standard er dens værdi '400ms'. Derudover understøtter den også to indbyggede værdier 'langsom' og 'hurtig'.
- lempelse: Den viser den falmende animationshastighed på forskellige punkter. Som standard er dens værdi 'sving (langsommere i starten/slutningen og langsom i midten)'. Derudover virker det også på 'lineær (konstant hastighed i fading animation)'.
- ring tilbage: Den definerer en brugerdefineret funktion, der udføres efter at have afsluttet fading-animationen for at udføre den definerede opgave.
Lad os bruge den ovenfor definerede metode praktisk talt.
HTML kode
Før du går videre til 'fadeOut()'-metoden, skal du se på følgende HTML-kode, der opretter et eksempel på et 'div'-element, hvorpå fade-out-effekten vil blive udført:
< knap > svinde bort ( Skjule Element ) knap >< br >< br >< div id = 'myDiv' stil = 'højde: 80px; bredde: 300px; kant: 2px ensfarvet sort; margin: auto; tekstjustering: center' >
< h2 > Velkommen til Linuxhint h2 >
div >
I ovenstående kodelinjer:
- Det '
” tag tilføjer et knapelement. - Det ' ” tag opretter et div-element med et id “myDiv”, og styles ved hjælp af følgende stilegenskaber (højde, bredde, kant, margin, tekst-justering).
- Inde i div er ' ” tag angiver det første underoverskriftselement på niveau 2.
Start nu med det første eksempel.
Eksempel 1: Opret glatte fade-out-effekter med fadeOut() standardværdi
Det første eksempel skjuler det matchede div-element ved at bruge 'fadeOut()'-metoden med standardværdien '400ms':
< manuskript >
$ ( dokument ) . parat ( fungere ( ) {
$ ( 'knap' ) . klik ( fungere ( ) {
$ ( '#myDiv' ) . svinde bort ( ) ;
} ) ;
} ) ;
manuskript >I ovenstående kodelinjer:
- For det første er ' parat() ”-metoden udfører de givne funktioner, når det aktuelle HTML-dokument/DOM er indlæst.
- Dernæst ' klik() ”-metoden udfører den tilknyttede funktion ved knapklik, når dens tilknyttede “knap”-vælger klikkes.
- Derefter vil ' svinde bort() ”-metoden skjuler det tilgåede div-element, hvis id er “myDiv” i 400ms, dvs. standardværdien.
Produktion
Det er observeret, at det givne knapklik udtoner div-elementet gradvist i '400ms'.
Eksempel 2: Opret glatte fade-out-effekter med fadeOut() 'hastighed'-parameteren
Dette eksempel bruger metoden 'fadeOut()' med de indbyggede værdier (langsom/hurtig) for parameteren 'hastighed':
< manuskript >
$ ( dokument ) . parat ( fungere ( ) {
$ ( 'knap' ) . klik ( fungere ( ) {
$ ( '#myDiv' ) . svinde bort ( 'langsom' ) ;
} ) ;
} ) ;
manuskript >Nu, ' svinde bort() '-metoden passerer ' langsom ”-værdi som dens parameter for jævnt at skabe fading-out-effekten, dvs. ændrer den valgte div-elementtilstand fra synlig til skjult.
Produktion
Det kan ses, at det valgte div-element gemmer sig langsomt ved knapklik.
Eksempel 3: Opret glatte fade-out-effekter med fadeOut() 'duration'-parameteren
Dette eksempel anvender metoden 'fadeOut()' med et specifikt antal millisekunder som varighedsparameter:
< manuskript >
$ ( dokument ) . parat ( fungere ( ) {
$ ( 'knap' ) . klik ( fungere ( ) {
$ ( '#myDiv' ) . svinde bort ( 6000 ) ;
} ) ;
} ) ;
manuskript >Nu bruger 'fadeOut()'-metoden det angivne antal millisekunder til at skjule det matchede element i den givne varighed.
Produktion
Ovenstående output skjuler de givne div-elementændringer ved et knapklik i et givet tidsinterval.
Eksempel 4: Opret glatte fade-out-effekter med fadeOut() 'callback'-funktionen
Dette eksempel udfører en tilbagekaldsfunktion efter afslutningen af fade-out-effekten via 'fadeOut()'-metoden:
< manuskript >
$ ( dokument ) . parat ( fungere ( ) {
$ ( 'knap' ) . klik ( fungere ( ) {
$ ( '#myDiv' ) . svinde bort ( 4000 , funktion ( ) {
konsol. log ( 'Det givne div-element er skjult med succes!' )
} ) ;
} ) ;
} ) ;
manuskript >I den angivne kodeblok:
- Det ' svinde bort() ”-metoden udtoner det matchede div-element på et bestemt antal millisekunder og udfører derefter den angivne “tilbagekaldsfunktion”.
- Inde i ' ring tilbage '-funktionen, ' console.log() ”-metoden anvendes til at vise den specificerede sætning efter fuldførelsen af “fade-out”-effekten.
Produktion
Det ses, at 'konsollen' viser en sætning defineret i tilbagekaldsfunktionen efter at have skjult det givne div-element.
Eksempel 5: Opret glatte fade-out-effekter med 'easing'-parameteren fadeOut()
Dette eksempel anvender metoden 'fadeOut()' med de mulige værdier af parameteren 'easing':
< manuskript >
$ ( dokument ) . parat ( fungere ( ) {
$ ( 'knap' ) . klik ( fungere ( ) {
$ ( '#myDiv' ) . svinde bort ( 4000 , 'lineær' ) ;
} ) ;
} ) ;
manuskript >Nu, ' svinde bort() ”-metoden udfører fade-out-effekten på et bestemt antal millisekunder ved en konstant hastighed på grund af ” lineær 'værdi.
Produktion
Outputtet ændrer den givne elementtilstand fra synlig til skjult ved konstant hastighed. Det er det for at implementere 'fade-out'-effekten på elementet.
Konklusion
For at skabe en jævn udtoningseffekt ved hjælp af jQuerys ' svinde bort() ”-metoden, kræver brugeren ikke nogen yderligere parameter. Denne metode fader ud, dvs. skjuler elementet gradvist ved at ændre dets opacitet. Hvis brugeren skal udføre en fading-out-effekt på et bestemt antal millisekunder, skal du udføre en tilbagekaldsfunktion og derefter bruge 'hastighed', 'lempelse' og 'tilbagekald'-parametre med 'fadeOut()'-metoden. Dette indlæg forklarede praktisk jQuerys fadeOut() metode til at skabe en jævn udtoningseffekt.