Ovaj će post objasniti praktičnu implementaciju jQuery metode fadeOut() za stvaranje glatkog efekta zatamnjenja.
Kako stvoriti glatke efekte zatamnjenja pomoću jQueryjeve metode fadeOut()?
jQueryjev ' izblijediti() ” metoda skriva odabrani element postupno smanjujući njegovu neprozirnost. Ova metoda mijenja stanje odabranog elementa iz vidljivog u skriveno. Skriveni element se ne prikazuje na web stranici sve dok ga korisnik ponovno ne prikaže pomoću ' nestati u() ” metoda.
Sintaksa
$ ( selektor ) . izblijediti ( brzina, popuštanje, povratni poziv ) ;
Gornja sintaksa podržava sljedeće izborne parametre za prilagodbu efekta zatamnjenja:
- ubrzati: Određuje brzinu efekta blijeđenja u milisekundama. Standardno je njegova vrijednost '400ms'. Štoviše, također podržava dvije ugrađene vrijednosti 'sporo' i 'brzo'.
- popuštanje: Prikazuje brzinu blijeđenja animacije u različitim točkama. Prema zadanim postavkama njegova je vrijednost 'zamah (sporije na početku/kraju i sporije u sredini)'. Osim toga, također radi na 'linearnom (konstantna brzina u blijedim animacijama)'.
- uzvratiti poziv: Definira korisnički definiranu funkciju koja se izvršava nakon završetka blijedeće animacije za izvođenje definiranog zadatka.
Praktično upotrijebimo gore definiranu metodu.
HTML kôd
Prije nego što prijeđete na metodu 'fadeOut()', pogledajte sljedeći HTML kod koji stvara ogledni element 'div' na kojem će se izvršiti efekt zatamnjenja:
< dugme > izblijediti ( Sakriti Element ) dugme >< br >< br >< div id = 'myDiv' stil = 'visina: 80px; širina: 300px;obrub: 2px puna crna; margina: auto; poravnanje teksta: središte' >
< h2 > Dobrodošli u Linuxhint h2 >
div >
U gornjim redcima koda:
- '
” dodaje element gumba. - ' ” stvara element div koji ima ID „myDiv” i stiliziran je uz pomoć sljedećih svojstava stila (visina, širina, obrub, margina, poravnanje teksta).
- Unutar diva, ' ” označava prvi element podnaslova razine 2.
Sada počnite s prvim primjerom.
Primjer 1: Stvaranje glatkih efekata zatamnjenja sa fadeOut() zadanom vrijednošću
Prvi primjer skriva podudarni element div upotrebom metode 'fadeOut()' sa zadanom vrijednošću '400ms':
< skripta >
$ ( dokument ) . spreman ( funkcija ( ) {
$ ( 'dugme' ) . klik ( funkcija ( ) {
$ ( '#myDiv' ) . izblijediti ( ) ;
} ) ;
} ) ;
skripta >U gornjim linijama koda:
- Prvo, ' spreman() ” metoda izvršava zadane funkcije kada se učita trenutni HTML dokument/DOM.
- Zatim, ' klik() ” metoda izvršava povezanu funkciju nakon klika na gumb kada se klikne njegov pridruženi selektor “gumba”.
- Nakon toga, ' izblijediti() ” metoda skriva element div kojem se pristupa, čiji je ID “myDiv” u 400 ms, tj. zadanu vrijednost.
Izlaz
Primijećeno je da dani klik na gumb postupno gubi element div u '400 ms'.
Primjer 2: Stvaranje glatkih efekata zatamnjenja s parametrom “brzine” fadeOut()
Ovaj primjer koristi metodu 'fadeOut()' s ugrađenim vrijednostima (sporo/brzo) parametra 'brzina':
< skripta >
$ ( dokument ) . spreman ( funkcija ( ) {
$ ( 'dugme' ) . klik ( funkcija ( ) {
$ ( '#myDiv' ) . izblijediti ( 'usporiti' ) ;
} ) ;
} ) ;
skripta >Sada, ' izblijediti() ' metoda prolazi ' usporiti ” kao svoj parametar za glatko stvaranje efekta zatamnjenja, tj. mijenja stanje odabranog div elementa iz vidljivog u skriveno.
Izlaz
Može se vidjeti da se odabrani div element polako skriva na klik na gumb.
Primjer 3: Stvorite glatke efekte zatamnjenja s parametrom fadeOut() “duration”
Ovaj primjer primjenjuje metodu 'fadeOut()' s određenim brojem milisekundi kao parametrom trajanja:
< skripta >
$ ( dokument ) . spreman ( funkcija ( ) {
$ ( 'dugme' ) . klik ( funkcija ( ) {
$ ( '#myDiv' ) . izblijediti ( 6000 ) ;
} ) ;
} ) ;
skripta >Sada metoda 'fadeOut()' koristi navedeni broj milisekundi za skrivanje podudarnog elementa u zadanom vremenskom trajanju.
Izlaz
Gornji izlaz skriva dane promjene div elementa nakon klika na gumb u zadanom vremenskom intervalu.
Primjer 4: Stvaranje glatkih efekata zatamnjenja pomoću funkcije povratnog poziva fadeOut()
Ovaj primjer izvršava funkciju povratnog poziva nakon završetka efekta zatamnjenja putem metode 'fadeOut()':
< skripta >
$ ( dokument ) . spreman ( funkcija ( ) {
$ ( 'dugme' ) . klik ( funkcija ( ) {
$ ( '#myDiv' ) . izblijediti ( 4000 , funkcija ( ) {
konzola. log ( 'Dani div element je uspješno sakriven!' )
} ) ;
} ) ;
} ) ;
skripta >U navedenom bloku koda:
- ' izblijediti() ” metoda bledi podudarni div element u određenom broju milisekundi i zatim izvršava danu funkciju “povratnog poziva”.
- Unutar ' uzvratiti poziv ', funkcija ' konzola.log() ” primjenjuje se metoda za prikaz navedene izjave nakon završetka efekta „fade-out”.
Izlaz
Vidi se da 'konzola' prikazuje izjavu definiranu u funkciji povratnog poziva nakon skrivanja zadanog div elementa.
Primjer 5: Stvaranje glatkih efekata zatamnjenja s parametrom 'ublažavanja' fadeOut()
Ovaj primjer primjenjuje metodu 'fadeOut()' s mogućim vrijednostima parametra 'easing':
< skripta >
$ ( dokument ) . spreman ( funkcija ( ) {
$ ( 'dugme' ) . klik ( funkcija ( ) {
$ ( '#myDiv' ) . izblijediti ( 4000 , 'linearno' ) ;
} ) ;
} ) ;
skripta >Sada, ' izblijediti() ” izvodi efekt zatamnjenja u određenom broju milisekundi pri konstantnoj brzini zbog “ linearni ” vrijednost.
Izlaz
Izlaz mijenja dano stanje elementa iz vidljivog u skriveno konstantnom brzinom. To je sve za implementaciju efekta 'fade-out' na elementu.
Zaključak
Za stvaranje glatkog efekta blijeđenja pomoću jQueryjevog ' izblijediti() ” korisniku nisu potrebni dodatni parametri. Ova metoda blijedi, tj. postupno skriva element promjenom njegove neprozirnosti. Ako korisnik treba izvršiti efekt zatamnjenja u određenom broju milisekundi, izvršite funkciju povratnog poziva, a zatim upotrijebite parametre 'brzina', 'ublažavanje' i 'povratni poziv' s metodom 'fadeOut()'. Ovaj post je praktično objasnio jQuery fadeOut() metodu za stvaranje glatkog efekta zatamnjenja.