Tento príspevok zdôrazňuje kľúčové rozdiely medzi hide() a fadeOut(), show() a fadeIn() v jQuery.
Predtým, ako prejdeme k rozdielu medzi hide() a fadeOut(), show() a fadeIn() v jQuery, si najprv prečítajte základy týchto metód prečítaním si nasledujúcich sprievodcov:
- Metóda fadeIn() jQuery
- Metóda fadeOut() jQuery
- JavaScript JQuery Hide() metóda | Vysvetlené
- Metóda JQuery Show() | Vysvetlené
Najprv si pozrite rozdiel medzi metódami hide() a fadeOut() v jQuery.
Rozlišujte medzi hide() a fadeOut() v jQuery
Jediný a jediný hlavný rozdiel medzi „ skryť () “ a „ vyblednúť() “ metóda je:
- Časový interval : ' skryť () ” metóda v predvolenom nastavení skryje prvok zmenou jeho nepriehľadnosti zo 100 na 0 okamžite bez toho, aby spotrebovala akýkoľvek časový interval, zatiaľ čo „ vyblednúť() ” metóda zmizne, t. j. skryje prvok postupne po „400 ms“, čo je jeho predvolená hodnota.
Pozrime sa na praktickú implementáciu uvedeného rozdielu.
Najprv sa pozrite na nasledujúci HTML kód:
< stred >< h2 id = 'H2' > Vitajte v Linuxhint ! h2 >
< tlačidlo > Skryť prvok tlačidlo >
stred >
Vo vyššie uvedených riadkoch kódu:
- '
” tag upravuje zarovnanie daných prvkov v strede webovej stránky. - ' Značka ” vytvorí podnadpis 2. úrovne s ID „H2“.
- '
” tag vloží nové tlačidlo.
Poznámka: Vyššie uvedený kód HTML sa používa v celej tejto príručke.
Príklad: Použitie metódy jQuery „hide()“ s hodnotou „Default“.
Tento príklad použije funkciu „hide()“ s jej predvolenými hodnotami na skrytie prvku:
< skript >$ ( dokument ) . pripravený ( funkciu ( ) {
$ ( 'tlačidlo' ) . kliknite ( funkciu ( ) {
$ ( '#H2' ) . skryť ( ) ;
} ) ;
} ) ;
skript >
Vo vyššie uvedených riadkoch kódu:
- Po prvé, „ pripravený() ” metóda sa použije na vykonanie špecifikovaných funkcií pri načítaní aktuálneho dokumentu HTML.
- Ďalej, „ klikni() ” metóda je zodpovedná za vykonanie prepojenej funkcie po kliknutí na tlačidlo.
- Potom sa „ skryť () ” metóda okamžite skryje prístupný prvok nadpisu, ktorého id je „H2“.
Výkon
Je vidieť, že prvok nadpisu sa skryje ihneď po kliknutí na tlačidlo.
Príklad: Použitie metódy jQuery „fadeOut()“ s hodnotou „Default“.
Tento príklad používa metódu „fadeOut()“ s jej predvolenými hodnotami na postupné skrytie daného prvku v „400 ms“.
V tomto scenári sa zmení obsah prvku „tlačidlo“:
< tlačidlo > vyblednúť ( Skryť Element ) tlačidlo >Teraz implementujte metódu „fadeOut()“ týmto spôsobom:
< skript >$ ( dokument ) . pripravený ( funkciu ( ) {
$ ( 'tlačidlo' ) . kliknite ( funkciu ( ) {
$ ( '#H2' ) . vyblednúť ( ) ;
} ) ;
} ) ;
skript >
V tomto čase je „ vyblednúť() ” metóda sa použije na zoslabenie prístupového prvku nadpisu s 400 ms, t. j. predvolenou hodnotou.
Výkon
Výstup jasne ukazuje, že dané kliknutie na tlačidlo skryje prvok nadpisu postupne v predvolenom časovom intervale t.j. „400 ms“.
Rozlišujte medzi show() a fadeIn() v jQuery
Podobne ako pri metódach „hide()“ a „fadeOut()“ je medzi metódami „show()“ a „fadeIn()“ rovnaký rozdiel:
- Časový interval : ' šou() ” metóda štandardne zobrazuje skrytý prvok okamžitou zmenou jeho nepriehľadnosti z 0 na 100, zatiaľ čo „ fadeIn() ” metóda zobrazuje skrytý prvok postupne v „400 ms“, čo je jeho predvolená hodnota.
Príklad: Použitie metódy jQuery „show()“ s hodnotou „Default“.
V tomto príklade sa na zobrazenie skrytého prvku použije „show()“ s jej predvolenými hodnotami.
Najprv sa pozrite na poskytnutý blok kódu HTML:
< stred >< tlačidlo > Zobraziť prvok tlačidlo >
< h2 id = 'H2' štýl = 'display:none' > Vitajte v Linuxhint ! h2 >
stred >
Podľa tohto scenára je daný prvok nadpisu skrytý pomocou „ displej: žiadny ' nehnuteľnosť.
Teraz postupujte podľa daného bloku kódu, aby ste pochopili praktickú implementáciu metódy „show()“:
< skript >$ ( dokument ) . pripravený ( funkciu ( ) {
$ ( 'tlačidlo' ) . kliknite ( funkciu ( ) {
$ ( '#H2' ) . šou ( ) ;
} ) ;
} ) ;
skript >
Vyššie uvedený blok kódu používa „ šou() ” na okamžité zobrazenie pridaného skrytého prvku.
Výkon
Je vidieť, že kliknutie na tlačidlo okamžite zobrazí skrytý prvok nadpisu.
Príklad: Použitie metódy jQuery „fadeIn()“ s hodnotou „Default“.
Tento príklad ukazuje skrytý prvok pomocou metódy „fadeIn()“ s predvolenou hodnotou „ 400 ms “:
Text prvku tlačidla sa zmení podľa daného scenára:
< tlačidlo > fadeIn ( Šou Element ) tlačidlo >Teraz použite „ fadeIn() ” pomocou nasledujúceho bloku kódu:
< skript >$ ( dokument ) . pripravený ( funkciu ( ) {
$ ( 'tlačidlo' ) . kliknite ( funkciu ( ) {
$ ( '#H2' ) . fadeIn ( ) ;
} ) ;
} ) ;
skript >
V tomto bloku kódu je „ fadeIn() ” metóda sa používa na zobrazenie skrytého prvku, ktorý sa zhoduje s id „H2“ za 400 ms, t. j. predvolená hodnota.
Výkon
Dá sa pozorovať, že dané kliknutie na tlačidlo zobrazuje skrytý prvok postupne v predvolenom časovom intervale t.j. „400 ms“.
Záver
V jQuery je jediným kľúčovým rozdielom medzi skryť () a vyblednúť() , šou() , a fadeIn() metóda je ' Časový interval “. Metódy „show()“ a „hide()“ predvolene vykonávajú svoje funkcie okamžite, zatiaľ čo metódy „fadeIn()“ a „fadeOut()“ vykonávajú svoje úlohy v predvolenom časovom intervale, t. j. „400 ms“. Tento príspevok prakticky vysvetlil kľúčové rozdiely medzi hide() a fadeOut(), show() a fadeIn() v jQuery.