Dit bericht belicht de belangrijkste verschillen tussen hide() en fadeOut(), show() en fadeIn() in jQuery.
Voordat we verder gaan met het verschil tussen hide() en fadeOut(), show() en fadeIn() in jQuery, bekijk eerst de basisprincipes van deze methoden door de volgende handleidingen te lezen:
- jQuery's fadeIn()-methode
- jQuery's fadeOut()-methode
- JavaScript JQuery Hide()-methode | Uitgelegd
- JQuery Show()-methode | Uitgelegd
Bekijk eerst het verschil tussen de methoden hide() en fadeOut() in jQuery.
Maak onderscheid tussen hide() en fadeOut() in jQuery
Het enige echte verschil tussen de “ verbergen() ' En ' fade-out() methode is:
- Tijdsinterval : De ' verbergen() ”methode verbergt standaard het element door de dekking ervan onmiddellijk van 100 in 0 te veranderen, zonder enig tijdsinterval in beslag te nemen, terwijl de “ fade-out() ”-methode vervaagt, d.w.z. verberg het element geleidelijk in “400 ms”, wat de standaardwaarde is.
Laten we eens kijken naar de praktische implementatie van het genoemde verschil.
Kijk eerst naar de volgende HTML-code:
< centrum >< h2 idd = 'H2' > Welkom bij Linuxhint ! h2 >
< knop > Element verbergen knop >
centrum >
In de bovenstaande coderegels:
- De '
”-tag past de uitlijning van de gegeven elementen in het midden van de webpagina aan. - De ' ”-tag maakt een subkop van niveau 2 met de ID “H2”.
- De '
'-tag voegt een nieuwe knop in.
Opmerking: De bovenstaande HTML-code wordt in deze handleiding gevolgd.
Voorbeeld: jQuery “hide()”-methode toepassen met “Default”-waarde
In dit voorbeeld wordt “hide()” met zijn standaardwaarden toegepast om een element te verbergen:
< script >$ ( document ) . klaar ( functie ( ) {
$ ( 'knop' ) . Klik ( functie ( ) {
$ ( '#H2' ) . verbergen ( ) ;
} ) ;
} ) ;
script >
In de bovenstaande coderegels:
- In de eerste plaats de “ klaar() De methode wordt toegepast om de opgegeven functies uit te voeren wanneer het huidige HTML-document wordt geladen.
- Vervolgens wordt de “ Klik() De methode is verantwoordelijk voor het uitvoeren van de gekoppelde functie bij het klikken op de knop.
- Daarna wordt de “ verbergen() ”-methode verbergt onmiddellijk het geopende kopelement waarvan de id “H2” is.
Uitvoer
Het is duidelijk dat het kopelement onmiddellijk wordt verborgen als er op de knop wordt geklikt.
Voorbeeld: jQuery “fadeOut()”-methode toepassen met “Default”-waarde
Dit voorbeeld gebruikt de methode “fadeOut()” met zijn standaardwaarden om het gegeven element geleidelijk te verbergen in “400ms”.
In dit scenario wordt de inhoud van het “knop”-element gewijzigd:
< knop > fade-out ( Verbergen Element ) knop >Implementeer nu de methode “fadeOut()” op deze manier:
< script >$ ( document ) . klaar ( functie ( ) {
$ ( 'knop' ) . Klik ( functie ( ) {
$ ( '#H2' ) . fade-out ( ) ;
} ) ;
} ) ;
script >
Op dit moment is de “ fade-out() De methode wordt toegepast om het geopende kopelement uit te faden met 400 ms, d.w.z. de standaardwaarde.
Uitvoer
De uitvoer laat duidelijk zien dat de gegeven klik op de knop het kopelement geleidelijk verbergt in het standaardtijdsinterval, d.w.z. '400 ms'.
Maak onderscheid tussen show() en fadeIn() in jQuery
Net als bij de methoden “hide()” en “fadeOut()” is er hetzelfde verschil tussen de methoden “show()” en “fadeIn()”:
- Tijdsinterval : De ' show() ”methode geeft standaard het verborgen element weer door de dekking ervan onmiddellijk van 0 in 100 te veranderen, terwijl de “ vervagen() ”-methode toont het verborgen element geleidelijk in “400 ms”, wat de standaardwaarde is.
Voorbeeld: jQuery “show()”-methode toepassen met “Default”-waarde
In dit voorbeeld wordt “show()” met zijn standaardwaarden toegepast om het verborgen element weer te geven.
Kijk eerst naar het meegeleverde HTML-codeblok:
< centrum >< knop > Toon element knop >
< h2 idd = 'H2' stijl = 'Geen weergeven' > Welkom bij Linuxhint ! h2 >
centrum >
Volgens dit scenario wordt het gegeven kopelement verborgen met behulp van de “ Geen weergeven ' eigendom.
Volg nu het gegeven codeblok om de praktische implementatie van de “show()” -methode te begrijpen:
< script >$ ( document ) . klaar ( functie ( ) {
$ ( 'knop' ) . Klik ( functie ( ) {
$ ( '#H2' ) . show ( ) ;
} ) ;
} ) ;
script >
Het bovenstaande codeblok gebruikt de “ show() ”-methode om het toegevoegde verborgen element onmiddellijk weer te geven.
Uitvoer
Het is te zien dat de klik op de knop het verborgen kopelement onmiddellijk toont.
Voorbeeld: jQuery “fadeIn()”-methode toepassen met “Default”-waarde
Dit voorbeeld toont het verborgen element met behulp van de methode “fadeIn()” met de standaardwaarde “ 400 ms ”:
De tekst van het knopelement wordt gewijzigd volgens het gegeven scenario:
< knop > vervagen ( Show Element ) knop >Pas nu de “ vervagen() ”-methode met behulp van het volgende codeblok:
< script >$ ( document ) . klaar ( functie ( ) {
$ ( 'knop' ) . Klik ( functie ( ) {
$ ( '#H2' ) . vervagen ( ) ;
} ) ;
} ) ;
script >
In dit codeblok wordt de “ vervagen() ”-methode wordt gebruikt om het verborgen element weer te geven dat overeenkomt met de id “H2” in 400 ms, d.w.z. de standaardwaarde.
Uitvoer
Er kan worden opgemerkt dat de gegeven klik op de knop het verborgen element geleidelijk toont in het standaard tijdsinterval, d.w.z. “400 ms”.
Conclusie
In jQuery is het enige belangrijke verschil tussen de verbergen() En fade-out() , show() , En vervagen() methode is “ Tijdsinterval ”. De methoden “show()” en “hide()” voeren hun functionaliteiten standaard onmiddellijk uit, terwijl de methoden “fadeIn()” en “fadeOut()” hun taken uitvoeren in het standaard tijdsinterval, d.w.z. “400 ms”. In dit bericht worden praktisch de belangrijkste verschillen uitgelegd tussen hide() en fadeOut(), show() en fadeIn() in jQuery.