Skjul et element etter noen sekunder ved hjelp av JavaScript
Mens du designer en responsiv webside, kan det være et krav for å skjule noen ekstra funksjonaliteter etter en viss tid for å skape effekter. For eksempel å varsle en bruker via pop-up-meldingen i en begrenset periode gjør underverker i å fange brukerens oppmerksomhet, og dermed avstå fra å bli fornærmet. I slike scenarier hjelper det å skjule et element etter noen sekunder ved hjelp av JavaScript.
Denne opplæringen vil forklare konseptet med å skjule et element etter noen sekunder ved å bruke JavaScript.
Hvordan skjule et element etter noen sekunder i JavaScript?
Følgende tilnærminger kan brukes til å skjule et element etter noen sekunder ved hjelp av JavaScript:
- “setTimeout ()”Metode med“vise”Eiendom.
- “setTimeout ()”Metode med“synlighet”Eiendom.
- “jQuery”Metoder.
La oss diskutere de uttalte tilnærmingene en etter en!
Tilnærming 1: Skjul et element etter noen sekunder i JavaScript ved bruk av Settimeout () -metode Wmed visningseiendommen
“setTimeout ()”Metode påkaller en funksjon etter den spesifiserte tildelte tiden. Mens “vise”Egenskaper angir det spesifiserte elementets visningstype. Disse tilnærmingene kan implementeres for å tildele en bestemt tid til det hentede elementet slik at det gjemmer seg etter den angitte tiden.
Syntaks
Settimeout (Func, Milli, par1, par2)I den ovennevnte syntaks:
- “func”Indikerer funksjonen som må nås.
- “Milli”Tilsvarer tidsintervallet i millisekunder å utføre.
- “par1”Og“par2”Pek på tilleggsparametrene.
I syntaks ovenfor:
- Visningsegenskapen til “Gjenstand”Er tildelt som“ingen”.
Eksempel
Følgende eksempel illustrerer det uttalte konseptet:
Bruk trinnene under gitt, som gitt i koden ovenfor:
- For det første, inkluder en "”Element som har“src”Og“id”Som dets attributter.
- I JS -koden, bruk "setTimeout ()”Metode til de uttalte kodelinjene. Den angitte tiden, i dette tilfellet, vil være 5000 millisekunder = “5”Sekunder.
- Innenfor metoden får tilgang til det inkluderte elementet av dets “id" bruker "getElementById ()”Metode.
- Etter det, tilordne “vise”Eiendom tilknyttet det hentet elementet som“ingen”.
- Dette vil resultere skjule “”Element etter 5 sekunder fra dokumentobjektmodellen (DOM).
Produksjon
Som observert i output ovenfor, inkluderte den inkluderte "”Element skjuler etter“5”Sekunder.
Tilnærming 2: Skjul et element etter noen sekunder i JavaScript ved bruk av Settimeout () -metode med synlighetseiendommen
“synlighet”Eiendom setter synligheten til et element. Denne egenskapen kan brukes kombinert med "setTimeout ()”Metode for å skjule det hentet elementet etter den angitte tiden.
Syntaks
Gjenstand.stil.synlighet = 'skjult'I denne syntaksen:
- Synligheten til den spesifiserte “Gjenstand”Er tildelt som“skjult”.
Eksempel
La oss gå gjennom det under-uttalte eksemplet:
| Id | Navn | Alder |
|---|---|---|
| 1 | David | 18 |
Utfør følgende trinn, som gitt i kodelinjene ovenfor:
- Inkluderer "
”Element som har attributtene”grense”Og“id”.
- Inneholder også de uttalte verdiene i tabellen i "
”,“ ”, Og“ ”Tagger. - I JavaScript -koden, på samme måte, bruk "setTimeout ()”Metode med en bestemt tid på“3”Sekunder.
- Etter det, påkalle “getElementById ()”Metode for å hente det inkluderte elementet, som diskutert.
- Til slutt, bruk "synlighet”Eiendom og tildel den som“skjult”. Dette vil skjule det tilhørende elementet etter 3 sekunder.
Produksjon
I ovennevnte utgang er det tydelig at "bord”Element skjuler seg etter den angitte tiden.
Tilnærming 3: Skjul et element etter noen sekunder i JavaScript ved hjelp av jQuery -metoder
“jQuery”Metode kan brukes for å skjule det tilsvarende elementet ved å hente det direkte og falme det ut etter den ekstra tiden.
Eksempel
La oss oversikt følgende eksempel:
Dette er Linuxhint -nettstedet
I ovennevnte kodebit:
- Inkluderer "jQuery”Bibliotek for å bruke metodene.
- Inkluderer "”Element som har det angitt”id”.
- I JS -koden får tilgang til det inkluderte elementet direkte ved å bruke IDen.
- Etter det, bruk "forestilling()”Metode, som vil vise det hentede elementet.
- “forsinkelse()" og "fadeout ()”Metoder vil bli brukt i kombinasjon for å skjule det tilknyttede elementet etter settet forsinkelsestid (“5”Sekunder).
Produksjon
Ovennevnte utgang betyr at den ekstra teksten blir skjult etter fem sekunder.
Konklusjon
“setTimeout ()”Metode med“vise”Eiendom,“setTimeout ()”Metode med“synlighet”Eiendom, eller“jQuery”Metoder kan brukes til å skjule et element etter noen sekunder i JavaScript. Metoden Settimeout () kombinert med visningen eller synlighetsegenskapen kan skjule det hentede elementet etter den angitte tiden. Mens jQuery -metodene kan hente elementet direkte, vise det og deretter skjule det ved å falme det ut. Denne artikkelen forklarte hvordan du kan skjule et element etter noen sekunder ved hjelp av JavaScript.
- Inneholder også de uttalte verdiene i tabellen i "