Ovaj post naglašava ključne razlike između hide() i fadeOut(), show() i fadeIn() u jQueryju.
Prije nego prijeđete na razliku između hide() i fadeOut(), show() i fadeIn() u jQueryju, prvo pogledajte osnove ovih metoda čitajući sljedeće vodiče:
- jQueryjeva metoda fadeIn().
- jQueryjeva metoda fadeOut().
- Metoda JavaScript JQuery Hide() | Objašnjeno
- Metoda JQuery Show() | Objašnjeno
Prvo pogledajte razliku između metoda hide() i fadeOut() u jQueryju.
Napravite razliku između hide() i fadeOut() u jQueryju
Jedna i jedina glavna razlika između ' sakriti() ' i ' izblijediti() ” metoda je:
- Vremenski interval : ' sakriti() ” prema zadanim postavkama skriva element promjenom njegove neprozirnosti sa 100 na 0 odmah bez trošenja vremenskog intervala, dok „ izblijediti() ” metoda blijedi tj. sakriva element postupno u “400ms” što je njegova zadana vrijednost.
Pogledajmo praktičnu primjenu navedene razlike.
Prvo pogledajte sljedeći HTML kod:
< centar >< h2 id = 'H2' > Dobrodošli u Linuxhint ! h2 >
< dugme > Sakrij element dugme >
centar >
U gornjim linijama koda:
- '
” podešava poravnanje zadanih elemenata u središtu web stranice. - ' ” stvara podnaslov razine 2 s ID-om “H2”.
- '
” umeće novi gumb.
Bilješka: Gornji HTML kod prati se u cijelom ovom vodiču.
Primjer: Primjena jQuery metode “hide()” s vrijednošću “Default”.
Ovaj primjer primjenjuje 'hide()' sa svojim zadanim vrijednostima za skrivanje elementa:
< skripta >$ ( dokument ) . spreman ( funkcija ( ) {
$ ( 'dugme' ) . klik ( funkcija ( ) {
$ ( '#H2' ) . sakriti ( ) ;
} ) ;
} ) ;
skripta >
U gornjim linijama koda:
- Prvo, ' spreman() ” primjenjuje se metoda za izvršavanje navedenih funkcija kada se učita trenutni HTML dokument.
- Zatim, ' klik() ” metoda odgovorna je za izvođenje povezane funkcije nakon klika na gumb.
- Nakon toga, ' sakriti() ” odmah skriva pristupni element naslova čiji je ID “H2”.
Izlaz
Vidi se da se element naslova skriva odmah nakon klika na gumb.
Primjer: Primjena jQuery metode 'fadeOut()' s vrijednošću 'Default'.
Ovaj primjer koristi metodu 'fadeOut()' sa svojim zadanim vrijednostima za postupno skrivanje zadanog elementa u '400ms'.
U ovom scenariju mijenja se sadržaj elementa 'button':
< dugme > izblijediti ( Sakriti Element ) dugme >Sada implementirajte metodu “fadeOut()” na ovaj način:
< skripta >$ ( dokument ) . spreman ( funkcija ( ) {
$ ( 'dugme' ) . klik ( funkcija ( ) {
$ ( '#H2' ) . izblijediti ( ) ;
} ) ;
} ) ;
skripta >
U ovom trenutku, ' izblijediti() ” primjenjuje se metoda za zatamnjenje elementa naslova kojem se pristupa s 400 ms, tj. zadanom vrijednošću.
Izlaz
Izlaz jasno pokazuje da dani klik na gumb postupno skriva element naslova u zadanom vremenskom intervalu, tj. '400 ms'.
Napravite razliku između show() i fadeIn() u jQueryju
Slično metodama “hide()” i “fadeOut()”, ista je razlika između metoda “show()” i “fadeIn()”:
- Vremenski interval : ' pokazati() ' prema zadanim postavkama prikazuje skriveni element mijenjajući njegovu neprozirnost s 0 na 100 odmah, dok ' nestati u() ” metoda prikazuje skriveni element postupno u “400ms” što je njegova zadana vrijednost.
Primjer: Primjena jQuery metode “show()” s vrijednošću “Default”.
Ovaj primjer primjenjuje 'show()' s njegovim zadanim vrijednostima za prikaz skrivenog elementa.
Prvo pogledajte navedeni blok HTML koda:
< centar >< dugme > Prikaži element dugme >
< h2 id = 'H2' stil = 'display:none' > Dobrodošli u Linuxhint ! h2 >
centar >
Prema ovom scenariju, dati element naslova skriven je uz pomoć ' prikaz: nijedan ” vlasništvo.
Sada slijedite navedeni blok koda kako biste razumjeli praktičnu implementaciju metode “show()”:
< skripta >$ ( dokument ) . spreman ( funkcija ( ) {
$ ( 'dugme' ) . klik ( funkcija ( ) {
$ ( '#H2' ) . pokazati ( ) ;
} ) ;
} ) ;
skripta >
Gornji blok koda koristi ' pokazati() ” za trenutni prikaz dodanog skrivenog elementa.
Izlaz
Može se vidjeti da klik na gumb odmah prikazuje skriveni element naslova.
Primjer: Primjena jQuery metode “fadeIn()” s vrijednošću “Default”.
Ovaj primjer prikazuje skriveni element pomoću metode 'fadeIn()' sa zadanom vrijednošću ' 400 ms ”:
Tekst elementa gumba mijenja se prema zadanom scenariju:
< dugme > nestati u ( Pokazati Element ) dugme >Sada primijenite ' nestati u() ” koristeći sljedeći blok koda:
< skripta >$ ( dokument ) . spreman ( funkcija ( ) {
$ ( 'dugme' ) . klik ( funkcija ( ) {
$ ( '#H2' ) . nestati u ( ) ;
} ) ;
} ) ;
skripta >
U ovom bloku koda, ' nestati u() ” metoda se koristi za prikaz skrivenog elementa koji se podudara s ID-om “H2” u 400 ms, tj. zadanom vrijednošću.
Izlaz
Može se primijetiti da dani klik na gumb prikazuje skriveni element postupno u zadanom vremenskom intervalu, tj. '400ms'.
Zaključak
U jQueryju, jedina ključna razlika između sakriti() i izblijediti() , pokazati() , i nestati u() metoda je ' Vremenski interval ”. Metode “show()” i “hide()” prema zadanim postavkama izvršavaju svoje funkcije odmah, dok metode “fadeIn()” i “fadeOut()” svoje zadatke obavljaju u zadanom vremenskom intervalu, tj. “400ms”. Ovaj post je praktično objasnio ključne razlike između hide() i fadeOut(), show() i fadeIn() u jQueryju.