Questo post evidenzia le differenze chiave tra hide() e fadeOut(), show() e fadeIn() in jQuery.
Prima di passare alla differenza tra hide() e fadeOut(), show() e fadeIn() in jQuery, guarda innanzitutto le basi di questi metodi leggendo le seguenti guide:
- Metodo fadeIn() di jQuery
- Metodo fadeOut() di jQuery
- Metodo JavaScript JQuery Hide() | Spiegato
- Metodo JQuery Show() | Spiegato
Per prima cosa, vedi la differenza tra i metodi hide() e fadeOut() in jQuery.
Distinguere tra hide() e fadeOut() in jQuery
L’unica differenza principale tra “ nascondere() ' E ' dissolvenza() Il metodo è:
- Intervallo di tempo : IL ' nascondere() ' per impostazione predefinita nasconde l'elemento modificandone immediatamente l'opacità da 100 a 0 senza consumare alcun intervallo di tempo, mentre il metodo ' dissolvenza() ' Il metodo svanisce, ovvero nasconde l'elemento gradualmente in '400ms' che è il suo valore predefinito.
Vediamo l’attuazione pratica della differenza dichiarata.
Per prima cosa guarda il seguente codice HTML:
< centro >< h2id = 'H2' > Benvenuti in Linuxhint ! h2 >
< pulsante > Nascondi elemento pulsante >
centro >
Nelle righe di codice sopra:
- IL '
Il tag ' regola l'allineamento degli elementi specificati al centro della pagina web. - IL ' ' Il tag crea un sottotitolo di livello 2 con un ID 'H2'.
- IL '
Il tag inserisce un nuovo pulsante.
Nota: Il codice HTML riportato sopra viene seguito in tutta questa guida.
Esempio: applicazione del metodo jQuery 'hide()' con valore 'Default'.
Questo esempio applica 'hide()' con i suoi valori predefiniti per nascondere un elemento:
< sceneggiatura >$ ( documento ) . pronto ( funzione ( ) {
$ ( 'pulsante' ) . clic ( funzione ( ) {
$ ( '#H2' ) . nascondere ( ) ;
} ) ;
} ) ;
sceneggiatura >
Nelle righe di codice sopra:
- In primo luogo, il “ pronto() ' viene applicato per eseguire le funzioni specificate quando viene caricato il documento HTML corrente.
- Successivamente, il “ clic() 'Il metodo è responsabile dell'esecuzione della funzione collegata al clic del pulsante.
- Dopodiché, il “ nascondere() ' nasconde immediatamente l'elemento di intestazione a cui si accede il cui ID è 'H2'.
Produzione
Si può vedere che l'elemento dell'intestazione si nasconde immediatamente dopo aver fatto clic sul pulsante.
Esempio: applicazione del metodo jQuery 'fadeOut()' con valore 'Default'.
Questo esempio utilizza il metodo “fadeOut()” con i suoi valori predefiniti per nascondere gradualmente l'elemento specificato in “400ms”.
In questo scenario il contenuto dell'elemento “pulsante” viene modificato:
< pulsante > dissolvenza ( Nascondere Elemento ) pulsante >Ora implementa il metodo “fadeOut()” in questo modo:
< sceneggiatura >$ ( documento ) . pronto ( funzione ( ) {
$ ( 'pulsante' ) . clic ( funzione ( ) {
$ ( '#H2' ) . dissolvenza ( ) ;
} ) ;
} ) ;
sceneggiatura >
In questo momento, il “ dissolvenza() ' viene applicato per sfumare l'elemento di intestazione a cui si accede con 400 ms, ovvero il valore predefinito.
Produzione
L'output mostra chiaramente che il clic del pulsante specificato nasconde gradualmente l'elemento dell'intestazione nell'intervallo di tempo predefinito, ovvero '400 ms'.
Distinguere tra show() e fadeIn() in jQuery
Simile ai metodi “hide()” e “fadeOut()”, la stessa differenza è tra il metodo “show()” e “fadeIn()”:
- Intervallo di tempo : IL ' spettacolo() ' per impostazione predefinita visualizza l'elemento nascosto modificandone immediatamente l'opacità da 0 a 100, mentre il metodo ' dissolvenzaIn() ' mostra l'elemento nascosto gradualmente in '400ms' che è il suo valore predefinito.
Esempio: applicazione del metodo jQuery 'show()' con valore 'Default'.
Questo esempio applica 'show()' con i suoi valori predefiniti per visualizzare l'elemento nascosto.
Per prima cosa guarda il blocco di codice HTML fornito:
< centro >< pulsante > Mostra elemento pulsante >
< h2id = 'H2' stile = 'visualizzazione:nessuno' > Benvenuti in Linuxhint ! h2 >
centro >
Secondo questo scenario, l'elemento dell'intestazione specificato viene nascosto con l'aiuto del comando ' visualizzazione: nessuno ' proprietà.
Ora segui il blocco di codice fornito per comprendere l'implementazione pratica del metodo 'show()':
< sceneggiatura >$ ( documento ) . pronto ( funzione ( ) {
$ ( 'pulsante' ) . clic ( funzione ( ) {
$ ( '#H2' ) . spettacolo ( ) ;
} ) ;
} ) ;
sceneggiatura >
Il blocco di codice precedente utilizza ' spettacolo() ' per visualizzare immediatamente l'elemento nascosto aggiunto.
Produzione
Si può vedere che il clic sul pulsante mostra immediatamente l'elemento di intestazione nascosto.
Esempio: applicazione del metodo jQuery 'fadeIn()' con valore 'Default'.
Questo esempio mostra l'elemento nascosto utilizzando il metodo “fadeIn()” con valore predefinito “ 400 ms ':
Il testo dell'elemento pulsante viene modificato in base allo scenario specificato:
< pulsante > dissolvenza ( Spettacolo Elemento ) pulsante >Ora applica il ' dissolvenzaIn() ' metodo utilizzando il seguente blocco di codice:
< sceneggiatura >$ ( documento ) . pronto ( funzione ( ) {
$ ( 'pulsante' ) . clic ( funzione ( ) {
$ ( '#H2' ) . dissolvenza ( ) ;
} ) ;
} ) ;
sceneggiatura >
In questo blocco di codice, il ' dissolvenzaIn() ' viene utilizzato per mostrare l'elemento nascosto che corrisponde all'id 'H2' in 400 ms, ovvero al valore predefinito.
Produzione
Si può osservare che il clic del pulsante mostra gradualmente l'elemento nascosto nell'intervallo di tempo predefinito, ovvero '400 ms'.
Conclusione
In jQuery, l'unica differenza fondamentale tra il file nascondere() E dissolvenza() , spettacolo() , E dissolvenzaIn() il metodo è “ Intervallo di tempo ”. I metodi “show()” e “hide()” eseguono le loro funzionalità immediatamente per impostazione predefinita, mentre i metodi “fadeIn()” e “fadeOut()” eseguono le loro attività nell'intervallo di tempo predefinito, ovvero “400ms”. Questo post spiega praticamente le differenze chiave tra hide() e fadeOut(), show() e fadeIn() in jQuery.