I prosessen med å designe en attraktiv og brukervennlig webside eller et nettsted, falmer inn og ut en spesifikk del i DOM gjør at det (nettstedet) skiller seg ut og iøynefallende. For eksempel å falme inn noe viktig informasjon eller innhold for å være iøynefallende på brukerens slutt. I et slikt tilfelle er denne funksjonaliteten veldig nyttig for å øke trafikken og rangere nettstedet.

Denne oppskrivningen vil gi en retningslinje for å visne div i JavaScript.

Hvordan visne div i JavaScript?

Fade-in div i JavaScript kan gjøres ved følgende tilnærminger:

• “Knappeklikk”
• “Vindusbelastning”

De uttalte tilnærmingene vil bli forklart en etter en!

Tilnærming 1: Fade-in Div i JavaScript på knappeklikk

I denne tilnærmingen er det spesifiserte bildet innenfor "div”Vil falme inn på klikket på knappen med hensyn til det spesifiserte tidsintervallet.

Det undergitte eksemplet demonstrerer det uttalte konseptet.

Eksempel
Først må du ta med "”Tag for å sentrere den spesifiserte overskriften og“div”. Fest også en "ved trykk”Arrangement med div som omdirigerer til funksjonen Fade (). Det spesifiserte bildet i neste trinn vil visne inn:

Dette bildet vil visne inn!

Deretter definerer du funksjonen som heter “falme()”. I sin definisjon får du tilgang til Div -elementet ved å bruke sitt “id”. Etter det, initialiser "Opacitet”Med“0.1”Og oppdater den med 0.1 med hensyn til det faste tidsintervallet (150 millisekunder). En maks grense vil også bli brukt på opaciteten for å begrense fade-in for riktig visning av "bilde”Innenfor diven:

funksjon fade ()
const element = dokument.getElementById ('Fade');
La opacitet = 0.1;
element.stil.display = 'blokk';
const timer = setInterval (funksjon ()
if (opacity> = 1)
ClearInterval (Timer);

element.stil.opacitet = opacitet;
Opacity += Opacity * 0.1;
, 150);

Produksjon

Tilnærming 2: Fade-in Div i JavaScript på vindusbelastningen

Denne tilnærmingen kan brukes ved å få tilgang til den spesifikke funksjonen så snart dokumentobjektmodellen (DOM) er lastet.

Oversikt det undergitte eksemplet for det forklarte konseptet.

Eksempel
I dette spesielle eksemplet, spesifiser på samme måtediv”Med den tildelte ID og fade-in følgende overskrift som er inneholdt i Div:

Velkommen til Linuxhint nettsted

Nå initialiserer du opaciteten på samme måte og får tilgang til funksjonen Fade () på vindusbelastningen ved å bruke “vindu.på Last" begivenhet:

var opacity = 0;
vindu.onload = fade;

Etter det, erklærer funksjonen som heter “falme()”. Her, bruk "setInterval ()”Metode. I sin parameter, inkluderer funksjonsdisplayet () for å bli utført for det spesifiserte tidsintervallet i millisekunder:

funksjon fade ()
SetInterval (Display, 500);

Til slutt, definere funksjonen som heter “vise()”. I sin definisjon få tilgang til det opprettet "div”Og på lignende måte øker opacitetsverdien basert på betingelsen for den maksimale grensen slik at den spesifiserte overskriften i DIV er falmet inn tydelig:

funksjonsdisplay ()
var kropp = dokument.getElementById ("Body");
hvis (opacitet < 1)
Opacitet = opacitet + 0.1;
kropp.stil.Opacitet = opacitet

Tilsvarende utgang vil være:

Vi har samlet de praktiske tilnærmingene til Fade-in Div i JavaScript.

Konklusjon

Fade-in Div i JavaScript kan utføres på “Knappeklikk”Eller når“Dom er lastet”. Knappeklikketilnærmingen påkaller en funksjon ved klikk og falmer inn bildet med hensyn til det angitte tidsintervallet. Den andre tilnærmingen blekner i overskriften innenfor diven på en automatisert måte så snart DOM er lastet. Denne oppskrivningen demonstrerte tilnærmingene som kan utføres for å visne div i JavaScript.