JQuery Fading -metoder forklart

Fading er eiendommen som tillater å manipulere opaciteten (åpenheten) av HTML -elementer. JQuery tilbyr fire falmingsmetoder som lar deg endre gjennomsiktighet av elementer. Disse metodene inkluderer Fadein (), Fadeout (), Fadetoggle () og Fadeto ().

Denne artikkelen utforsker falmingmetodene i jQuery og betjener følgende læringsutbytte.

• Arbeid av jQuery Fading Methods
• Bruke jQuery Fading Methods

Hvordan du bruker jQuery fading -metoder

Som diskutert tidligere, har jQuery fire falmingsmetoder, og en dyp innsikt i alle disse metodene er gitt her.

Hvordan bruke Fadein () -metoden

Fadein () -metoden viser elementet ved å øke opaciteten. Syntaks for denne metoden er gitt nedenfor:

$ (velger).fadein (hastighet, tilbakeringing);

Syntaksen har følgende forekomster

• velger kan være et hvilket som helst element eller kan referere til klassen eller IDen til ethvert element.
• hastighet kan spesifiseres i en av fire verdier: langsomme, middels, raske og millisekunder.
• Ring tilbake er den valgfrie parameteren og utøves etter at funksjonen er utført vellykket.

Eksempel

Koden gitt nedenfor viser bruken av jQuery fadeout () -metoden.

jQuery

$ (dokument).klar (funksjon ()
$ (".fadein ").klikk (funksjon ()
$ (".langsom").fadein ("sakte");
$ (".fort").fadein ("rask");
$ (".mili ").Fadein (2000);
);
);

Koden er beskrevet som,

• .Fadein refererer til knappeklassen og når du klikker på knappen, vil den visne avsnittet
• de .langsom, .raskt, og .mili Klassene refererer til tre avsnitt som vil bli falmet inn i forskjellige hastigheter

Merk: Displayegenskapen til elementet (som du skal visne) må være satt til ingen.

Produksjon

Som vi falmer inn og avsnittets visningsegenskaper er satt til ingen. Dermed vil avsnittene være skjult ved å kjøre siden.

Etter å ha klikket på knappen, vil du observere at avsnittene vil vises avhengig av hastigheten som vist på bildet nedenfor.

Hvordan bruke Fadeout () -metode

Fadeout () -metoden blekner ut det viste elementet ved å redusere elementets opacitet. Syntaks for denne metoden er gitt nedenfor:

$ (velger).fadeout (hastighet, tilbakeringing);

Eksempel

Koden skrevet nedenfor viser bruken av jQuery fadeout () -metoden.

Ovennevnte kode er beskrevet som,

• .fadeout Knappklasse brukes som vil falme ut avsnittet
• de .langsom, .raskt, og .mili er klassenavnene som er satt til avsnitt og vil bli brukt til å fadeout så vel som for styling

Produksjon

I Fadeout () -metoden vil avsnittet vises som vist nedenfor.

Etter å ha klikket på knappen, vil avsnittet visne ut.

Hvordan bruke Fadeto () -metode

Fadeto () -metoden fungerer på prinsippene for Fadeout () -metoden. Imidlertid blekner Fadeto () elementet ved å bruke et numerisk område (0-1). Dette opacitetsområdet definerer opacitetsnivået til elementet, jo høyere er antall høyere vil være opaciteten og omvendt. Syntaksen er gitt nedenfor:

$ (velger).Fadeto (hastighet, opacitet, tilbakeringing);

Opacitetsparameteren godtar 0 til 1 verdi.

Eksempel

Koden gitt nedenfor praktiserer Fadeto () -metoden.

Koden er beskrevet som,

• .Fadeto refererer til knappeklassen
• de #min, #AVG og #Max Representerer ID -ene for tre DIV -tagger, og disse ID -ene refererer til verdiene som vil bli brukt for Fadeto () -metode
• Fadingverdien varierer fra 0 til 1 i fadeto () -metoder

Produksjon

Før du bruker Fadeto () -metode

Etter å ha brukt Fadeto () -metode

Fra opsjonen ovenfor observeres det at avsnittet som har verdi 0 er vasket ut.

Hvordan bruke Fadetoggle () -metode

Fadetoggle () -metoden ligger mellom Fadein () og Fadeout () -metoder. Ved å bruke Fadetoggle (), kan du vise et skjult element og kan skjule et vist element. Syntaks for denne metoden er:

$ (velger).Fadeto (hastighet, tilbakeringing);

Eksempel

Koden som er gitt nedenfor fungerer for å bruke Fadetoggle () -metoden.

• .Fadetoggle Klassen refererer til knappen
• #sakte, #fast og #mili representerer forskjellige ID -er av div

Produksjon

Før du klikker på knappen

Etter å ha klikket på knappen,

Det konkluderes med at hvis elementet vises, vil det være skjult etter Fadetoggle () -metode (som Fadeout () -metoden gjør). Tilsvarende, hvis elementet er i Fadeout () -tilstand, vil fadetoggle () fungere som en fadein () -metode.

Konklusjon

JQuery gir forskjellige falmingsmetoder som inkluderer fadein (), fadeout (), fadetoggle () og fadeto () som hjelper til med å falme HTML -elementer. Denne guiden gir arbeid og bruk av hver jQuery Fading -metode. Fadein () -metoden viser element hvis den er skjult, mens Fadeout () skjuler elementet. Fadeto () -metoden falmer inn eller ut avhengig av opacitetsnummer. Til slutt funksjoner Fadetoggle () -metoden mellom Fadein () og Fadeout () -metoder.