Tämä viesti korostaa tärkeimmät erot hide() ja fadeOut(), show() ja fadeIn() välillä jQueryssa.
Ennen kuin siirryt eroon hide()- ja fadeOut(), show()- ja fadeIn()-funktioiden välillä jQueryssa, tutustu ensin näiden menetelmien perusteisiin lukemalla seuraavat oppaat:
- jQueryn fadeIn() -menetelmä
- jQueryn fadeOut() -menetelmä
- JavaScript JQuery Piilota() -menetelmä | Selitetty
- JQuery Show() -menetelmä | Selitetty
Katso ensin jQueryn hide()- ja fadeOut()-menetelmien ero.
Erota hide() ja fadeOut() jQueryssa
Yksi ja ainoa tärkein ero ' piilottaa() ' ja ' kadota näkyvistä() 'menetelmä on:
- Aikaväli : ' piilottaa() ' -menetelmä piilottaa elementin oletusarvoisesti muuttamalla sen opasiteetin arvosta 100 arvoon 0 välittömästi kuluttamatta mitään aikaväliä, kun taas ' kadota näkyvistä() ' -menetelmä häivyttää eli piilottaa elementin asteittain '400 ms':ssa, joka on sen oletusarvo.
Katsotaanpa esitetyn eron käytännön toteutusta.
Katso ensin seuraavaa HTML-koodia:
< keskusta >< h2 id = 'H2' > Tervetuloa Linuxhintiin ! h2 >
< -painiketta > Piilota elementti -painiketta >
keskusta >
Yllä olevilla koodiriveillä:
- '
” -tunniste säätää annettujen elementtien kohdistusta verkkosivun keskellä. - ' ' -tunniste luo tason 2 alaotsikon, jonka tunnus on 'H2'.
- '
' -tunniste lisää uuden painikkeen.
Huomautus: Yllä olevaa HTML-koodia noudatetaan läpi tämän oppaan.
Esimerkki: jQueryn 'hide()'-menetelmän käyttö 'oletusarvolla'.
Tämä esimerkki käyttää 'hide()' oletusarvoineen piilottaakseen elementin:
< käsikirjoitus >$ ( asiakirja ) . valmis ( toiminto ( ) {
$ ( 'painike' ) . klikkaus ( toiminto ( ) {
$ ( '#H2' ) . piilottaa ( ) ;
} ) ;
} ) ;
käsikirjoitus >
Yllä olevilla koodiriveillä:
- Ensinnäkin ' valmis() ” -menetelmää käytetään määritettyjen toimintojen suorittamiseen, kun nykyinen HTML-dokumentti ladataan.
- Seuraavaksi ' klikkaus() ” -menetelmä vastaa linkitetyn toiminnon suorittamisesta painiketta napsauttamalla.
- Sen jälkeen ' piilottaa() ” -menetelmä piilottaa välittömästi käytetyn otsikkoelementin, jonka tunnus on 'H2'.
Lähtö
Voidaan nähdä, että otsikkoelementti piiloutuu välittömästi painikkeen painalluksen jälkeen.
Esimerkki: jQueryn fadeOut()-menetelmän käyttäminen oletusarvolla
Tässä esimerkissä käytetään 'fadeOut()'-menetelmää oletusarvoineen piilottaakseen asteittain tietyn elementin '400 ms':ssa.
Tässä skenaariossa 'button'-elementin sisältö muuttuu:
< -painiketta > kadota näkyvistä ( Piilottaa Elementti ) -painiketta >Toteuta nyt 'fadeOut()' -menetelmä tällä tavalla:
< käsikirjoitus >$ ( asiakirja ) . valmis ( toiminto ( ) {
$ ( 'painike' ) . klikkaus ( toiminto ( ) {
$ ( '#H2' ) . kadota näkyvistä ( ) ;
} ) ;
} ) ;
käsikirjoitus >
Tällä hetkellä ' kadota näkyvistä() ” -menetelmää käytetään häivyttämään käytetty otsikkoelementti 400 ms:lla eli oletusarvolla.
Lähtö
Tulos osoittaa selvästi, että annettu painikkeen napsautus piilottaa otsikkoelementin asteittain oletusaikavälillä eli '400 ms'.
Erota show() ja fadeIn() jQueryssa
Samoin kuin 'hide()' ja 'fadeOut()', sama ero on 'show()' ja 'fadeIn()' -menetelmien välillä:
- Aikaväli : ' näytä() ' -menetelmä näyttää oletusarvoisesti piilotetun elementin muuttamalla sen peittävyyttä 0:sta 100:aan välittömästi, kun taas ' fadeIn() ' -menetelmä näyttää piilotetun elementin asteittain '400 ms', joka on sen oletusarvo.
Esimerkki: jQuery 'show()' -menetelmän soveltaminen 'oletusarvolla'.
Tämä esimerkki käyttää 'show()' oletusarvoineen piilotetun elementin näyttämiseen.
Katso ensin toimitettua HTML-koodilohkoa:
< keskusta >< -painiketta > Näytä elementti -painiketta >
< h2 id = 'H2' tyyli = 'näyttö: ei mitään' > Tervetuloa Linuxhintiin ! h2 >
keskusta >
Tämän skenaarion mukaan annettu otsikkoelementti piilotetaan ' näyttö: ei mitään ” omaisuutta.
Seuraa nyt annettua koodilohkoa ymmärtääksesi 'show()' -menetelmän käytännön toteutuksen:
< käsikirjoitus >$ ( asiakirja ) . valmis ( toiminto ( ) {
$ ( 'painike' ) . klikkaus ( toiminto ( ) {
$ ( '#H2' ) . näytä ( ) ;
} ) ;
} ) ;
käsikirjoitus >
Yllä oleva koodilohko käyttää ' näytä() ' -menetelmä näyttää lisätyn piilotetun elementin välittömästi.
Lähtö
Voidaan nähdä, että napsautus näyttää piilotetun otsikkoelementin välittömästi.
Esimerkki: jQuery 'fadeIn()' -menetelmän käyttäminen 'oletusarvolla'.
Tämä esimerkki näyttää piilotetun elementin käyttämällä 'fadeIn()' -menetelmää oletusarvolla ' 400 ms ':
Painikeelementin tekstiä muutetaan annetun skenaarion mukaan:
< -painiketta > fadeIn ( Näytä Elementti ) -painiketta >Käytä nyt ' fadeIn() ” -menetelmä käyttäen seuraavaa koodilohkoa:
< käsikirjoitus >$ ( asiakirja ) . valmis ( toiminto ( ) {
$ ( 'painike' ) . klikkaus ( toiminto ( ) {
$ ( '#H2' ) . fadeIn ( ) ;
} ) ;
} ) ;
käsikirjoitus >
Tässä koodilohkossa ' fadeIn() ” -menetelmää käytetään näyttämään piilotettu elementti, joka vastaa tunnuksella 'H2' 400 ms:ssa eli oletusarvossa.
Lähtö
Voidaan havaita, että annettu napsautus näyttää piilotetun elementin asteittain oletusaikavälillä eli '400 ms'.
Johtopäätös
JQueryssä ainoa keskeinen ero piilottaa() ja kadota näkyvistä() , näytä() , ja fadeIn() menetelmä on ' Aikaväli ”. 'show()' ja 'hide()' -menetelmät suorittavat toiminnallisuutensa oletusarvoisesti välittömästi, kun taas 'fadeIn()' ja 'fadeOut()' -menetelmät suorittavat tehtävänsä oletusaikavälillä eli '400 ms'. Tämä viesti selitti käytännössä tärkeimmät erot hide()- ja fadeOut(), show()- ja fadeIn()-funktioiden välillä jQueryssa.