Dette innlegget fremhever de viktigste forskjellene mellom hide() og fadeOut(), show() og fadeIn() i jQuery.
Før du går videre til forskjellen mellom hide() og fadeOut(), show() og fadeIn() i jQuery, se først på det grunnleggende om disse metodene ved å lese følgende veiledninger:
- jQuerys fadeIn()-metode
- jQuerys fadeOut()-metode
- JavaScript JQuery Hide() Metode | Forklart
- JQuery Show() Metode | Forklart
Se først forskjellen mellom metodene hide() og fadeOut() i jQuery.
Skille mellom hide() og fadeOut() i jQuery
Den eneste hovedforskjellen mellom ' gjemme seg() ' og ' fadeOut() 'metoden er:
- Tidsintervall : Den ' gjemme seg() '-metoden skjuler elementet som standard ved å endre opasiteten fra 100 til 0 umiddelbart uten å bruke noe tidsintervall, mens ' fadeOut() ”-metoden tones ut, dvs. skjule elementet gradvis i “400ms”, som er standardverdien.
La oss se den praktiske implementeringen av den oppgitte forskjellen.
Se først på følgende HTML-kode:
< senter >< h2 id = 'H2' > Velkommen til Linuxhint ! h2 >
< knapp > Skjul element knapp >
senter >
I kodelinjene ovenfor:
- «
”-taggen justerer justeringen av de gitte elementene i midten av nettsiden. - « '-taggen oppretter en underoverskrift på nivå 2 med en id 'H2'.
- «
” tag setter inn en ny knapp.
Merk: HTML-koden ovenfor følges gjennom denne veiledningen.
Eksempel: Bruk av jQuery «hide()»-metoden med «Standard»-verdi
Dette eksemplet bruker 'hide()' med standardverdiene for å skjule et element:
< manus >$ ( dokument ) . klar ( funksjon ( ) {
$ ( 'knapp' ) . klikk ( funksjon ( ) {
$ ( '#H2' ) . gjemme seg ( ) ;
} ) ;
} ) ;
manus >
I kodelinjene ovenfor:
- For det første, ' klar() ”-metoden brukes for å utføre de spesifiserte funksjonene når gjeldende HTML-dokument er lastet.
- Deretter ' klikk() ”-metoden er ansvarlig for å utføre den tilknyttede funksjonen ved knappeklikk.
- Etter det, ' gjemme seg() ”-metoden skjuler det åpnede overskriftselementet umiddelbart hvis ID er “H2”.
Produksjon
Det kan sees at overskriftselementet skjuler seg umiddelbart etter et knappeklikk.
Eksempel: Bruk av jQuery 'fadeOut()'-metoden med 'Standard'-verdi
Dette eksemplet bruker 'fadeOut()'-metoden med standardverdiene for gradvis å skjule det gitte elementet i '400ms'.
I dette scenariet endres innholdet i 'knapp'-elementet:
< knapp > fadeOut ( Gjemme seg Element ) knapp >Implementer nå 'fadeOut()'-metoden på denne måten:
< manus >$ ( dokument ) . klar ( funksjon ( ) {
$ ( 'knapp' ) . klikk ( funksjon ( ) {
$ ( '#H2' ) . fade ut ( ) ;
} ) ;
} ) ;
manus >
På dette tidspunktet ' fadeOut() ”-metoden brukes for å fade ut det åpnede overskriftselementet med 400ms, dvs. standardverdien.
Produksjon
Utgangen viser tydelig at det gitte knappeklikket skjuler overskriftselementet gradvis i standard tidsintervall, dvs. '400ms'.
Skille mellom show() og fadeIn() i jQuery
I likhet med 'hide()' og 'fadeOut()'-metoder, er den samme forskjellen mellom 'show()' og 'fadeIn()'-metoden:
- Tidsintervall : Den ' forestilling() '-metoden viser som standard det skjulte elementet ved å endre opasiteten fra 0 til 100 umiddelbart, mens ' fadeIn() ”-metoden viser det skjulte elementet gradvis i “400ms”, som er standardverdien.
Eksempel: Bruk av jQuery «show()»-metoden med «Standard»-verdi
Dette eksemplet bruker 'show()' med standardverdiene for å vise det skjulte elementet.
Se først på den medfølgende HTML-kodeblokken:
< senter >< knapp > Vis element knapp >
< h2 id = 'H2' stil = 'display:none' > Velkommen til Linuxhint ! h2 >
senter >
I henhold til dette scenariet er det gitte overskriftselementet skjult ved hjelp av ' display: ingen ' eiendom.
Følg nå den gitte kodeblokken for å forstå den praktiske implementeringen av 'show()'-metoden:
< manus >$ ( dokument ) . klar ( funksjon ( ) {
$ ( 'knapp' ) . klikk ( funksjon ( ) {
$ ( '#H2' ) . forestilling ( ) ;
} ) ;
} ) ;
manus >
Kodeblokken ovenfor bruker ' forestilling() ”-metoden for å vise det lagte skjulte elementet umiddelbart.
Produksjon
Det kan sees at et knappeklikk viser det skjulte overskriftselementet umiddelbart.
Eksempel: Bruk av jQuery 'fadeIn()'-metoden med 'Standard'-verdi
Dette eksemplet viser det skjulte elementet ved å bruke 'fadeIn()'-metoden med standardverdien ' 400 ms ':
Teksten til knappeelementet endres i henhold til det gitte scenariet:
< knapp > fadeIn ( Forestilling Element ) knapp >Bruk nå ' fadeIn() ”-metoden som bruker følgende kodeblokk:
< manus >$ ( dokument ) . klar ( funksjon ( ) {
$ ( 'knapp' ) . klikk ( funksjon ( ) {
$ ( '#H2' ) . fadeIn ( ) ;
} ) ;
} ) ;
manus >
I denne kodeblokken er ' fadeIn() ”-metoden brukes til å vise det skjulte elementet som samsvarer med ID-en “H2” i 400ms, dvs. standardverdien.
Produksjon
Det kan observeres at det gitte knappeklikket viser det skjulte elementet gradvis i standardtidsintervallet, dvs. '400ms'.
Konklusjon
I jQuery er den eneste nøkkelforskjellen mellom gjemme seg() og fadeOut() , forestilling() , og fadeIn() metoden er ' Tidsintervall '. 'show()' og 'hide()'-metoden utfører funksjonaliteten umiddelbart som standard, mens 'fadeIn()', og 'fadeOut()'-metoden utfører oppgavene sine i standardtidsintervallet, dvs. '400ms'. Dette innlegget forklarte praktisk talt de viktigste forskjellene mellom hide() og fadeOut(), show() og fadeIn() i jQuery.