Tento příspěvek zdůrazňuje klíčové rozdíly mezi hide() a fadeOut(), show() a fadeIn() v jQuery.
Než přejdeme k rozdílu mezi hide() a fadeOut(), show() a fadeIn() v jQuery, nejprve se podívejte na základy těchto metod a přečtěte si následující průvodce:
- Metoda fadeIn() jQuery
- Metoda fadeOut() jQuery
- Metoda JavaScript JQuery Hide() | Vysvětleno
- Metoda JQuery Show() | Vysvětleno
Nejprve se podívejte na rozdíl mezi metodami hide() a fadeOut() v jQuery.
Rozlišujte mezi hide() a fadeOut() v jQuery
Jediný hlavní rozdíl mezi „ skrýt() ' a ' odeznít() “ metoda je:
- Časový interval : ' skrýt() ” metoda ve výchozím nastavení skryje prvek změnou jeho krytí ze 100 na 0 okamžitě, aniž by spotřeboval jakýkoli časový interval, zatímco “ odeznít() ” metoda slábne, tj. skryje prvek postupně za „400 ms“, což je jeho výchozí hodnota.
Podívejme se na praktické provedení uvedeného rozdílu.
Nejprve se podívejte na následující HTML kód:
< centrum >< h2 id = 'H2' > Vítejte v Linuxhintu ! h2 >
< knoflík > Skrýt prvek knoflík >
centrum >
Ve výše uvedených řádcích kódu:
- '
” upraví zarovnání daných prvků na střed webové stránky. - ' Značka ” vytvoří podnadpis úrovně 2 s id „H2“.
- '
” tag vloží nové tlačítko.
Poznámka: Výše uvedený HTML kód je dodržován v celé této příručce.
Příklad: Použití metody jQuery „hide()“ s hodnotou „Default“.
Tento příklad použije „hide()“ s jeho výchozími hodnotami ke skrytí prvku:
< skript >$ ( dokument ) . připraven ( funkce ( ) {
$ ( 'knoflík' ) . klikněte ( funkce ( ) {
$ ( '#H2' ) . skrýt ( ) ;
} ) ;
} ) ;
skript >
Ve výše uvedených řádcích kódu:
- Za prvé, „ připraven() ” metoda se použije k provedení zadaných funkcí při načtení aktuálního dokumentu HTML.
- Dále, „ klikni() ” metoda je zodpovědná za provedení propojené funkce po kliknutí na tlačítko.
- Poté se „ skrýt() Metoda ” skryje okamžitě přístupný prvek nadpisu, jehož id je „H2“.
Výstup
Je vidět, že prvek nadpisu se skryje ihned po kliknutí na tlačítko.
Příklad: Použití metody jQuery „fadeOut()“ s hodnotou „Default“.
Tento příklad používá metodu „fadeOut()“ s jejími výchozími hodnotami k postupnému skrytí daného prvku v „400 ms“.
V tomto scénáři se změní obsah prvku „button“:
< knoflík > odeznít ( Skrýt Živel ) knoflík >Nyní implementujte metodu „fadeOut()“ tímto způsobem:
< skript >$ ( dokument ) . připraven ( funkce ( ) {
$ ( 'knoflík' ) . klikněte ( funkce ( ) {
$ ( '#H2' ) . odeznít ( ) ;
} ) ;
} ) ;
skript >
V této době je „ odeznít() ” metoda se použije k zeslabení prvku nadpisu, ke kterému se přistupuje, se 400 ms, tj. výchozí hodnotou.
Výstup
Výstup jasně ukazuje, že dané kliknutí na tlačítko skryje prvek nadpisu postupně ve výchozím časovém intervalu, tj. „400 ms“.
Rozlišujte mezi show() a fadeIn() v jQuery
Podobně jako u metod „hide()“ a „fadeOut()“ je stejný rozdíl mezi metodami „show()“ a „fadeIn()“:
- Časový interval : ' ukázat() ” metoda ve výchozím nastavení zobrazuje skrytý prvek okamžitou změnou jeho krytí z 0 na 100, zatímco „ fadeIn() ” metoda zobrazuje skrytý prvek postupně v „400 ms“, což je jeho výchozí hodnota.
Příklad: Použití metody jQuery „show()“ s hodnotou „Default“.
Tento příklad použije „show()“ s jeho výchozími hodnotami pro zobrazení skrytého prvku.
Nejprve se podívejte na poskytnutý blok HTML kódu:
< centrum >< knoflík > Zobrazit prvek knoflík >
< h2 id = 'H2' styl = 'display:none' > Vítejte v Linuxhintu ! h2 >
centrum >
Podle tohoto scénáře je daný prvek nadpisu skryt pomocí „ displej: žádný ' vlastnictví.
Nyní postupujte podle daného bloku kódu, abyste pochopili praktickou implementaci metody „show()“:
< skript >$ ( dokument ) . připraven ( funkce ( ) {
$ ( 'knoflík' ) . klikněte ( funkce ( ) {
$ ( '#H2' ) . ukázat ( ) ;
} ) ;
} ) ;
skript >
Výše uvedený blok kódu používá „ ukázat() ” pro okamžité zobrazení přidaného skrytého prvku.
Výstup
Je vidět, že kliknutí na tlačítko okamžitě zobrazí skrytý prvek nadpisu.
Příklad: Použití metody jQuery „fadeIn()“ s hodnotou „Výchozí“.
Tento příklad ukazuje skrytý prvek pomocí metody „fadeIn()“ s výchozí hodnotou „ 400 ms “:
Text prvku tlačítka se změní podle daného scénáře:
< knoflík > fadeIn ( Ukázat Živel ) knoflík >Nyní použijte „ fadeIn() ” pomocí následujícího bloku kódu:
< skript >$ ( dokument ) . připraven ( funkce ( ) {
$ ( 'knoflík' ) . klikněte ( funkce ( ) {
$ ( '#H2' ) . fadeIn ( ) ;
} ) ;
} ) ;
skript >
V tomto bloku kódu je „ fadeIn() ” metoda se používá k zobrazení skrytého prvku, který je shodný s id „H2“ za 400 ms, tj. výchozí hodnota.
Výstup
Lze pozorovat, že dané kliknutí na tlačítko zobrazuje skrytý prvek postupně ve výchozím časovém intervalu, tj. „400 ms“.
Závěr
V jQuery je jediným klíčovým rozdílem mezi skrýt() a odeznít() , ukázat() , a fadeIn() metoda je ' Časový interval “. Metody „show()“ a „hide()“ plní své funkce ve výchozím nastavení okamžitě, zatímco metody „fadeIn()“ a „fadeOut()“ plní své úkoly ve výchozím časovém intervalu, tj. „400 ms“. Tento příspěvek prakticky vysvětlil klíčové rozdíly mezi hide() a fadeOut(), show() a fadeIn() v jQuery.