See postitus toob esile peamised erinevused jQuery hide() ja fadeOut(), show() ja fadeIn() vahel.
Enne jQuery funktsioonide hide() ja fadeOut(), show() ja fadeIn() erinevuste käsitlemist vaadake esmalt nende meetodite põhitõdesid, lugedes järgmisi juhendeid:
- jQuery fadeIn() meetod
- jQuery fadeOut() meetod
- JavaScript JQuery Hide() meetod | Selgitatud
- JQuery Show() meetod | Selgitatud
Esiteks vaadake jQuery meetodite hide() ja fadeOut() erinevust.
Tehke jQuerys vahet hide() ja fadeOut() vahel
Üks ja ainus peamine erinevus ' peida () ” ja „ hääbuma() ” meetod on:
- Ajavahemik : ' peida () ' meetod peidab elemendi vaikimisi, muutes selle läbipaistmatuse 100-lt 0-le kohe ilma ajavahemikku kulutamata, samas kui ' hääbuma() ” meetod tuhmub, st peida element järk-järgult 400 ms-i, mis on selle vaikeväärtus.
Vaatame märgitud erinevuse praktilist rakendamist.
Esmalt vaadake järgmist HTML-koodi:
< Keskus >< h2 id = 'H2' > Tere tulemast Linuxhinti ! h2 >
< nuppu > Peida element nuppu >
Keskus >
Ülaltoodud koodiridades:
- '
” silt reguleerib antud elementide joondamist veebilehe keskel. - ' ” silt loob 2. taseme alampealkirja ID-ga „H2”.
- '
” silt lisab uue nupu.
Märge: Ülaltoodud HTML-koodi järgitakse kogu selles juhendis.
Näide: jQuery 'hide()' meetodi rakendamine 'vaikeväärtusega'.
See näide rakendab elemendi peitmiseks funktsiooni 'hide()' selle vaikeväärtustega:
< stsenaarium >$ ( dokument ) . valmis ( funktsiooni ( ) {
$ ( 'nupp' ) . klõpsa ( funktsiooni ( ) {
$ ( '#H2' ) . peita ( ) ;
} ) ;
} ) ;
stsenaarium >
Ülaltoodud koodiridades:
- Esiteks, ' valmis () ” meetodit rakendatakse määratud funktsioonide täitmiseks praeguse HTML-dokumendi laadimisel.
- Järgmiseks ' kliki () ” meetod vastutab lingitud funktsiooni täitmise eest nupu klõpsamisel.
- Pärast seda ' peida () ” meetod peidab koheselt avatud pealkirjaelemendi, mille id on “H2”.
Väljund
On näha, et pealkirja element peidab end kohe pärast nupu klõpsamist.
Näide: jQuery 'fadeOut()' meetodi rakendamine 'vaikeväärtusega'
See näide kasutab 'fadeOut()' meetodit selle vaikeväärtustega, et peita antud element järk-järgult '400 ms' jooksul.
Selle stsenaariumi korral muudetakse nupu 'nupu' sisu:
< nuppu > hääbuma ( Peida Element ) nuppu >Nüüd rakendage meetodit 'fadeOut()' järgmiselt:
< stsenaarium >$ ( dokument ) . valmis ( funktsiooni ( ) {
$ ( 'nupp' ) . klõpsa ( funktsiooni ( ) {
$ ( '#H2' ) . hääbuma ( ) ;
} ) ;
} ) ;
stsenaarium >
Sel ajal on ' hääbuma() ” meetodit kasutatakse juurdepääsetava pealkirja elemendi tuhmumiseks 400 ms, st vaikeväärtusega.
Väljund
Väljund näitab selgelt, et antud nupuklõps peidab pealkirja elemendi järk-järgult vaikeajaintervalli, st “400 ms” jooksul.
Eristage jQuery parameetrite show() ja fadeIn() vahel
Sarnaselt meetoditele 'hide()' ja 'fadeOut()', on sama erinevus ka 'show()' ja 'fadeIn()' meetoditel:
- Ajavahemik : ' näita () ' meetod kuvab vaikimisi peidetud elemendi, muutes selle läbipaistmatuse koheselt 0-lt 100-le, samas kui ' hajuma() ” meetod näitab peidetud elementi järk-järgult 400 ms jooksul, mis on selle vaikeväärtus.
Näide: jQuery 'show()' meetodi rakendamine 'vaikeväärtusega'.
See näide rakendab peidetud elemendi kuvamiseks 'show()' selle vaikeväärtustega.
Esmalt vaadake pakutavat HTML-koodiplokki:
< Keskus >< nuppu > Näita elementi nuppu >
< h2 id = 'H2' stiilis = 'display:none' > Tere tulemast Linuxhinti ! h2 >
Keskus >
Selle stsenaariumi kohaselt peidetakse antud pealkirja element '' abil ekraan: puudub ” vara.
Nüüd järgige antud koodiplokki, et mõista 'show()' meetodi praktilist rakendamist:
< stsenaarium >$ ( dokument ) . valmis ( funktsiooni ( ) {
$ ( 'nupp' ) . klõpsa ( funktsiooni ( ) {
$ ( '#H2' ) . näidata ( ) ;
} ) ;
} ) ;
stsenaarium >
Ülaltoodud koodiplokk kasutab ' näita () ” meetod lisatud peidetud elemendi kohe kuvamiseks.
Väljund
Näha on, et nupuklõps näitab kohe peidetud pealkirja elementi.
Näide: jQuery 'fadeIn()' meetodi rakendamine 'vaikeväärtusega'.
See näide näitab peidetud elementi, kasutades meetodit 'fadeIn()' vaikeväärtusega ' 400 ms ”:
Nupuelemendi teksti muudetakse vastavalt antud stsenaariumile:
< nuppu > hajuma ( Näita Element ) nuppu >Nüüd rakendage ' hajuma() ” meetod, kasutades järgmist koodiplokki:
< stsenaarium >$ ( dokument ) . valmis ( funktsiooni ( ) {
$ ( 'nupp' ) . klõpsa ( funktsiooni ( ) {
$ ( '#H2' ) . hajuma ( ) ;
} ) ;
} ) ;
stsenaarium >
Selles koodiplokis on ' hajuma() ” meetodit kasutatakse peidetud elemendi kuvamiseks, mis on vastavuses ID-ga 'H2' 400 ms, st vaikeväärtusega.
Väljund
Võib täheldada, et antud nupuklõps näitab peidetud elementi järk-järgult vaikeajaintervalli ehk “400ms” jooksul.
Järeldus
JQuerys on ainus oluline erinevus peida () ja hääbuma() , näita () , ja hajuma() meetod on ' Ajavahemik ”. Meetod „show()” ja „hide()” täidavad oma funktsioone vaikimisi kohe, samas kui meetodid „fadeIn()” ja „fadeOut()” täidavad oma ülesandeid vaikeajaintervalli, st „400 ms” jooksul. See postitus selgitas praktiliselt peamisi erinevusi hide() ja fadeOut(), show() ja fadeIn() vahel jQuerys.