W trakcie projektowania atrakcyjnej i przyjaznej dla użytkownika strony internetowej lub strony internetowej, zanikania i wychodzenia określonej części w DOM sprawia, że ​​(strona internetowa) wyróżnia się i przyciąga wzrok. Na przykład zanikanie niektórych ważnych informacji lub treści, aby przyciągnąć wzrok na końcu użytkownika. W takim przypadku ta funkcjonalność jest bardzo przydatna w zwiększaniu ruchu i rankingu strony internetowej.

Ten zapis zapewni wytyczne dotyczące zanikania DIV w JavaScript.

Jak zanikać Div w JavaScript?

Bludnie-ind Div w JavaScript można wykonać na następujących podejściach:

• "Kliknij przycisk"
• "Obciążenie okna"

Podane podejścia zostaną wyjaśnione jeden na jeden!

Podejście 1: Fade-In div w JavaScript na przycisku

W tym podejściu określony obraz w „div”Zgadza się po kliknięciu przycisku w odniesieniu do określonego przedziału czasu.

Poniższy przykład pokazuje podaną koncepcję.

Przykład
Po pierwsze, uwzględnij „”Tag w celu wyśrodkowania określonego nagłówka i„div". Dołącz także „na kliknięcie„Wydarzenie z przekierowaniem DIV do funkcji Fade (). Określony obraz w następnym kroku zniknie:

Ten obraz zniknie!

Następnie zdefiniuj funkcję o nazwie „znikać()". W swojej definicji uzyskaj dostęp do elementu DIV za pomocą jego „ID". Następnie zainicjuj „nieprzezroczystość" z "0.1”I zaktualizuj go 0.1 W odniesieniu do ustalonego przedziału czasu (150 milisekund). Maksymalny limit zostanie również zastosowany na krycie, aby ograniczyć zanik w celu właściwego wyświetlania „obraz„W obrębie Div:

funkcja fade ()
const Element = dokument.getElementById („Fade”);
Niech krycie = 0.1;
element.styl.display = „blok”;
const timer = setInterval (function ()
if (krycie> = 1)
clearInterval (timer);

element.styl.krycie = krycie;
Krycie += krycie * 0.1;
, 150);

Wyjście

Podejście 2: Fade-in div w JavaScript na obciążeniu okna

Takie podejście można zastosować, uzyskując dostęp do określonej funkcji, gdy tylko ładowany jest model obiektu dokumentu (DOM).

Przegląd poniżej podanego przykładu wyjaśnionej koncepcji.

Przykład
W tym konkretnym przykładzie podobnie określ „div”Z przypisanym identyfikatorem i blaknięciem następującego nagłówka zawartego w Div:

Witamy na stronie internetowej Linuxhint

Teraz podobnie zainicjuj krycie i uzyskuj dostęp do funkcji fade () na obciążeniu okna za pomocą „okno.Onload" wydarzenie:

zmienność = 0;
okno.onload = fade;

Następnie zadeklaruj funkcję o nazwie „znikać()". Tutaj zastosuj „setInterval ()" metoda. W swoim parametrze dołącz funkcję display (), aby zostać wykonany dla określonego przedziału czasu w milisekundach:

funkcja fade ()
setInterval (wyświetlacz, 500);

Na koniec zdefiniuj funkcję o nazwie „wyświetlacz()". W swojej definicji uzyskaj dostęp do utworzonych „div”I podobnie zwiększ wartość krycia w oparciu o warunek dla jego maksymalnego limitu, tak że określone nagłówek w div jest wyraźnie wyblakłe:

funkcja wyświetlacza ()
var body = dokument.getElementById („ciało”);
if (krycie < 1)
krycie = krycie + 0.1;
ciało.styl.krycie = krycie

Odpowiednie wyjście będzie:

Zebraliśmy wygodne podejścia do zanikania div w JavaScript.

Wniosek

Fade-in div w JavaScript można wykonać na „Kliknij przycisk”Lub kiedy„DOM jest załadowany". Podejście kliknięcia przycisku wywołuje funkcję po kliknięciu i zanikając obraz w odniesieniu do ustawionego przedziału czasu. Drugie podejście znika na nagłówku w Div w zautomatyzowany sposób, gdy tylko DOM zostanie załadowany. Ten zapis wykazał podejścia, które można wykonać w celu zanikania div w JavaScript.