Ez a bejegyzés rávilágít a fő különbségekre a hide() és a fadeOut(), a show() és a fadeIn() között a jQuery-ben.
Mielőtt rátérne a hide() és a fadeOut(), a show() és a fadeIn() közötti különbségre a jQuery alkalmazásban, először tekintse át ezeknek a módszereknek az alapjait a következő útmutatók elolvasásával:
- A jQuery fadeIn() metódusa
- A jQuery fadeOut() metódusa
- JavaScript JQuery Hide() Method | Elmagyarázta
- JQuery Show() metódus | Elmagyarázta
Először nézze meg a különbséget a jQuery hide() és fadeOut() metódusai között.
Tegyen különbséget a hide() és a fadeOut() között a jQuery-ben
Az egyetlen fő különbség a ' elrejt() ” és „ elájulni() ” módszere a következő:
- Időintervallum : A ' elrejt() ” metódus alapértelmezés szerint elrejti az elemet úgy, hogy az átlátszatlanságát 100-ról 0-ra módosítja azonnal anélkül, hogy bármilyen időintervallumot igénybe venne, míg a „ elájulni() ” metódus elhalványul, azaz fokozatosan elrejti az elemet „400 ms” alatt, ami az alapértelmezett érték.
Lássuk a megfogalmazott különbség gyakorlati megvalósítását.
Először nézze meg a következő HTML-kódot:
< központ >< h2 id = 'H2' > Üdvözöljük a Linuxhintben ! h2 >
< gomb > Elem elrejtése gomb >
központ >
A fenti kódsorokban:
- A '
” címke beállítja az adott elemek igazítását a weboldal közepén. - A ' ” címke 2. szintű alcímet hoz létre „H2” azonosítóval.
- A '
” címke új gombot szúr be.
Jegyzet: A fenti HTML-kódot követjük ebben az útmutatóban.
Példa: A jQuery „hide()” metódusának alkalmazása „Alapértelmezett” értékkel
Ez a példa a „hide()”-t az alapértelmezett értékeivel alkalmazza egy elem elrejtéséhez:
< forgatókönyv >$ ( dokumentum ) . kész ( funkció ( ) {
$ ( 'gomb' ) . kattintson ( funkció ( ) {
$ ( '#H2' ) . elrejt ( ) ;
} ) ;
} ) ;
forgatókönyv >
A fenti kódsorokban:
- Először is a „ kész() ” metódus kerül alkalmazásra a megadott függvények végrehajtására az aktuális HTML dokumentum betöltésekor.
- Ezután a „ kattints() ” metódus felelős a linkelt funkció végrehajtásáért a gombra kattintáskor.
- Ezt követően a „ elrejt() ” metódus azonnal elrejti az elért címsorelemet, amelynek azonosítója „H2”.
Kimenet
Látható, hogy a címsor elem azonnal elrejtőzik a gombnyomásra.
Példa: A jQuery „fadeOut()” módszer alkalmazása „alapértelmezett” értékkel
Ez a példa a „fadeOut()” metódust használja alapértelmezett értékeivel, hogy fokozatosan elrejtse az adott elemet „400 ms” alatt.
Ebben a forgatókönyvben a „gomb” elem tartalma megváltozik:
< gomb > elájulni ( Elrejt Elem ) gomb >Most hajtsa végre a „fadeOut()” metódust a következő módon:
< forgatókönyv >$ ( dokumentum ) . kész ( funkció ( ) {
$ ( 'gomb' ) . kattintson ( funkció ( ) {
$ ( '#H2' ) . elájulni ( ) ;
} ) ;
} ) ;
forgatókönyv >
Ebben az időben a „ elájulni() ” módszert alkalmazzák az elért fejléc elem eltüntetésére 400 ms-mal, azaz alapértelmezett értékkel.
Kimenet
A kimeneten jól látható, hogy az adott gombnyomás fokozatosan elrejti a fejlécet az alapértelmezett időintervallumban, azaz „400 ms”-ban.
Tegyen különbséget a show() és a fadeIn() között a jQuery-ben
A „hide()” és a „fadeOut()” metódusokhoz hasonlóan ugyanaz a különbség a „show()” és a „fadeIn()” metódusok között:
- Időintervallum : A ' előadás() ” metódus alapértelmezés szerint megjeleníti a rejtett elemet úgy, hogy azonnal megváltoztatja átlátszatlanságát 0-ról 100-ra, míg a „ fadeIn() ” metódus a rejtett elemet fokozatosan „400 ms”-ban mutatja meg, ami az alapértelmezett értéke.
Példa: A jQuery „show()” metódusának alkalmazása „Alapértelmezett” értékkel
Ez a példa a „show()”-t az alapértelmezett értékeivel alkalmazza a rejtett elem megjelenítéséhez.
Először nézze meg a megadott HTML kódblokkot:
< központ >< gomb > Elem megjelenítése gomb >
< h2 id = 'H2' stílus = 'display:none' > Üdvözöljük a Linuxhintben ! h2 >
központ >
Ennek a forgatókönyvnek megfelelően az adott címsorelem elrejtése a „ kijelző: nincs ' ingatlan.
Most kövesse az adott kódblokkot, hogy megértse a „show()” metódus gyakorlati megvalósítását:
< forgatókönyv >$ ( dokumentum ) . kész ( funkció ( ) {
$ ( 'gomb' ) . kattintson ( funkció ( ) {
$ ( '#H2' ) . előadás ( ) ;
} ) ;
} ) ;
forgatókönyv >
A fenti kódblokk a „ előadás() ” módszerrel a hozzáadott rejtett elem azonnali megjelenítéséhez.
Kimenet
Látható, hogy a gombkattintás azonnal megmutatja a rejtett fejlécet.
Példa: A jQuery „fadeIn()” metódusának alkalmazása „Alapértelmezett” értékkel
Ez a példa a rejtett elemet mutatja be a „fadeIn()” metódussal, alapértelmezett értékkel „ 400 ms ”:
A gombelem szövege az adott forgatókönyv szerint módosul:
< gomb > fadeIn ( Előadás Elem ) gomb >Most alkalmazza a „ fadeIn() ” módszer a következő kódblokkot használva:
< forgatókönyv >$ ( dokumentum ) . kész ( funkció ( ) {
$ ( 'gomb' ) . kattintson ( funkció ( ) {
$ ( '#H2' ) . fadeIn ( ) ;
} ) ;
} ) ;
forgatókönyv >
Ebben a kódblokkban a „ fadeIn() ” metódust használják a rejtett elem megjelenítésére, amely a „H2” azonosítóhoz illeszkedik 400 ms-ban, azaz az alapértelmezett érték.
Kimenet
Megfigyelhető, hogy az adott gombnyomás a rejtett elemet fokozatosan, az alapértelmezett időintervallumban, azaz „400 ms”-ban mutatja.
Következtetés
A jQueryben az egyetlen lényeges különbség a elrejt() és elájulni() , előadás() , és fadeIn() a módszer ' Időintervallum ”. A „show()” és a „hide()” metódus alapértelmezés szerint azonnal végrehajtja funkcióit, míg a „fadeIn()” és „fadeOut()” metódus az alapértelmezett időintervallumban, azaz „400 ms”-ban hajtja végre a feladatait. Ez a bejegyzés gyakorlatilag elmagyarázta a legfontosabb különbségeket a hide() és a fadeOut(), a show() és a fadeIn() között a jQuery-ben.