Această postare evidențiază diferențele cheie dintre hide() și fadeOut(), show() și fadeIn() în jQuery.
Înainte de a trece la diferența dintre hide() și fadeOut(), show() și fadeIn() în jQuery, priviți mai întâi elementele de bază ale acestor metode citind următoarele ghiduri:
- Metoda fadeIn() a jQuery
- Metoda fadeOut() a jQuery
- Metoda JavaScript JQuery Hide() | explicat
- Metoda JQuery Show() | explicat
Mai întâi, vedeți diferența dintre metodele hide() și fadeOut() în jQuery.
Faceți diferența între hide() și fadeOut() în jQuery
Singura și singura diferență principală dintre „ ascunde() ' și ' fadeOut() ” metoda este:
- Interval de timp : „ ascunde() ” metoda implicit ascunde elementul prin schimbarea opacității acestuia de la 100 la 0 imediat, fără a consuma niciun interval de timp, în timp ce „ fadeOut() ” metoda dispare, adică ascundeți elementul treptat în „400 ms”, care este valoarea sa implicită.
Să vedem implementarea practică a diferenței declarate.
Priviți mai întâi următorul cod HTML:
< centru >< h2 id = 'H2' > Bun venit la Linuxhint ! h2 >
< buton > Ascundeți elementul buton >
centru >
În liniile de cod de mai sus:
- „
” eticheta ajustează alinierea elementelor date în centrul paginii web. - „ Eticheta ” creează un subtitlu de nivel 2 cu un id „H2”.
- „
” eticheta introduce un buton nou.
Notă: Codul HTML de mai sus este urmat pe tot parcursul acestui ghid.
Exemplu: aplicarea metodei jQuery „hide()” cu valoarea „implicit”.
Acest exemplu aplică „hide()” cu valorile sale implicite pentru a ascunde un element:
< scenariu >$ ( document ) . gata ( funcţie ( ) {
$ ( 'buton' ) . clic ( funcţie ( ) {
$ ( „#H2” ) . ascunde ( ) ;
} ) ;
} ) ;
scenariu >
În liniile de cod de mai sus:
- În primul rând, „ gata() ” se aplică pentru a executa funcțiile specificate atunci când documentul HTML curent este încărcat.
- În continuare, „ clic() ” Metoda este responsabilă pentru realizarea funcției conectate la clic pe butonul.
- După aceea, „ ascunde() ” ascunde imediat elementul de antet accesat al cărui id este „H2”.
Ieșire
Se poate observa că elementul de titlu se ascunde imediat după clic pe butonul.
Exemplu: aplicarea metodei jQuery „fadeOut()” cu valoarea „implicit”
Acest exemplu folosește metoda „fadeOut()” cu valorile sale implicite pentru a ascunde treptat elementul dat în „400ms”.
În acest scenariu, conținutul elementului „buton” este modificat:
< buton > fadeOut ( Ascunde Element ) buton >Acum implementați metoda „fadeOut()” în acest fel:
< scenariu >$ ( document ) . gata ( funcţie ( ) {
$ ( 'buton' ) . clic ( funcţie ( ) {
$ ( „#H2” ) . fadeOut ( ) ;
} ) ;
} ) ;
scenariu >
În acest moment, „ fadeOut() ” este aplicată pentru a elimina elementul de antet accesat cu 400 ms, adică valoarea implicită.
Ieșire
Rezultatul arată clar că clicul pe butonul dat ascunde elementul de titlu treptat în intervalul de timp implicit, adică „400 ms”.
Faceți diferența între show() și fadeIn() în jQuery
Similar cu metodele „hide()” și „fadeOut()”, aceeași diferență este între metoda „show()” și „fadeIn()”:
- Interval de timp : „ spectacol() ” metoda afișează implicit elementul ascuns schimbându-i imediat opacitatea de la 0 la 100, în timp ce „ fadeIn() ” arată elementul ascuns treptat în „400ms”, care este valoarea sa implicită.
Exemplu: aplicarea metodei jQuery „show()” cu valoarea „implicit”.
Acest exemplu aplică „show()” cu valorile sale implicite pentru a afișa elementul ascuns.
Mai întâi uitați-vă la blocul de cod HTML furnizat:
< centru >< buton > Afișați elementul buton >
< h2 id = 'H2' stil = 'afisare:niciuna' > Bun venit la Linuxhint ! h2 >
centru >
Conform acestui scenariu, elementul de antet dat este ascuns cu ajutorul „ display: niciunul ” proprietate.
Acum, urmați blocul de cod dat pentru a înțelege implementarea practică a metodei „show()”:
< scenariu >$ ( document ) . gata ( funcţie ( ) {
$ ( 'buton' ) . clic ( funcţie ( ) {
$ ( „#H2” ) . spectacol ( ) ;
} ) ;
} ) ;
scenariu >
Blocul de cod de mai sus folosește „ spectacol() ” pentru a afișa imediat elementul ascuns adăugat.
Ieșire
Se poate observa că clicul butonului arată imediat elementul de titlu ascuns.
Exemplu: aplicarea metodei jQuery „fadeIn()” cu valoarea „implicit”.
Acest exemplu arată elementul ascuns folosind metoda „fadeIn()” cu valoarea implicită „ 400 ms ”:
Textul elementului buton este modificat în funcție de scenariul dat:
< buton > fadeIn ( Spectacol Element ) buton >Acum, aplicați „ fadeIn() ” folosind următorul bloc de cod:
< scenariu >$ ( document ) . gata ( funcţie ( ) {
$ ( 'buton' ) . clic ( funcţie ( ) {
$ ( „#H2” ) . fadeIn ( ) ;
} ) ;
} ) ;
scenariu >
În acest bloc de cod, „ fadeIn() ” este utilizată pentru a afișa elementul ascuns care se potrivește cu id-ul „H2” în 400 ms, adică valoarea implicită.
Ieșire
Se poate observa că clicul pe butonul dat arată elementul ascuns treptat în intervalul de timp implicit, adică „400ms”.
Concluzie
În jQuery, singura diferență cheie între ascunde() și fadeOut() , spectacol() , și fadeIn() metoda este „ Interval de timp ”. Metodele „show()” și „hide()” își realizează funcționalitățile imediat în mod implicit, în timp ce metoda „fadeIn()” și „fadeOut()” își realizează sarcinile în intervalul de timp implicit, adică „400ms”. Această postare a explicat practic diferențele cheie dintre hide() și fadeOut(), show() și fadeIn() în jQuery.