In dit bericht wordt de praktische implementatie uitgelegd van de fadeOut()-methode van jQuery voor het creëren van een vloeiend fade-out-effect.
Hoe maak je vloeiende fade-outeffecten met behulp van de fadeOut()-methode van jQuery?
jQuery's ' fade-out() De methode verbergt het geselecteerde element geleidelijk door de dekking ervan te verminderen. Deze methode verandert de status van het geselecteerde element van zichtbaar naar verborgen. Het verborgen element wordt pas op de webpagina weergegeven als de gebruiker het opnieuw weergeeft met behulp van de knop “ vervagen() methode.
Syntaxis
$ ( keuzeschakelaar ) . fade-out ( snelheid, versoepeling, terugbellen ) ;
De bovenstaande syntaxis ondersteunt de volgende optionele parameters om het fade-outeffect aan te passen:
- snelheid: Het specificeert de snelheid van het vervagingseffect in milliseconden. Standaard is de waarde “400ms”. Bovendien ondersteunt het ook twee ingebouwde waarden “langzaam” en “snel”.
- versoepeling: Het toont de vervagende animatiesnelheid op verschillende punten. Standaard is de waarde “swing (langzamer aan het begin/einde, en langzaam in het midden)”. Daarnaast werkt het ook op de “lineaire (constante snelheid bij vervagende animatie)”.
- Bel terug: Het definieert een door de gebruiker gedefinieerde functie die wordt uitgevoerd na voltooiing van de vervagende animatie om de gedefinieerde taak uit te voeren.
Laten we de hierboven gedefinieerde methode praktisch gebruiken.
HTML code
Voordat u verdergaat met de methode “fadeOut()”, bekijkt u de volgende HTML-code die een voorbeeld van een “div”-element maakt waarop het fade-out-effect wordt uitgevoerd:
< knop > fade-out ( Verbergen Element ) knop >< br >< br >< div id = 'mijnDiv' stijl = 'hoogte: 80px; breedte: 300px;rand: 2px effen zwart; marge: automatisch; tekst uitlijnen: midden' >
< h2 > Welkom bij Linuxhint h2 >
div >
In de bovenstaande regels code:
- De '
'-tag voegt een knopelement toe. - De ' ”-tag maakt een div-element aan met de id “myDiv” en wordt opgemaakt met behulp van de volgende stijleigenschappen (hoogte, breedte, rand, marge, tekstuitlijning).
- Binnen de div, de “ ”-tag specificeert het eerste subkopelement van niveau 2.
Begin nu met het eerste voorbeeld.
Voorbeeld 1: Creëer vloeiende fade-outeffecten met fadeOut() standaardwaarde
Het eerste voorbeeld verbergt het overeenkomende div-element door gebruik te maken van de “fadeOut()”-methode met de standaardwaarde “400ms”:
< script >
$ ( document ) . klaar ( functie ( ) {
$ ( 'knop' ) . Klik ( functie ( ) {
$ ( '#mijnDiv' ) . fade-out ( ) ;
} ) ;
} ) ;
script >In de bovenstaande coderegels:
- In de eerste plaats de “ klaar() ”-methode voert de gegeven functies uit wanneer het huidige HTML-document/DOM wordt geladen.
- Vervolgens wordt de “ Klik() '-methode voert de gekoppelde functie uit bij een klik op de knop wanneer op de bijbehorende 'knop'-selector wordt geklikt.
- Daarna wordt de “ fade-out() ”-methode verbergt het geopende div-element waarvan de id “myDiv” is in 400 ms, d.w.z. de standaardwaarde.
Uitvoer
Er wordt opgemerkt dat de gegeven klik op de knop het div-element geleidelijk vervaagt in '400 ms'.
Voorbeeld 2: Creëer vloeiende fade-outeffecten met de fadeOut() “speed” parameter
In dit voorbeeld wordt de methode “fadeOut()” gebruikt met de ingebouwde waarden (langzaam/snel) van de parameter “snelheid”:
< script >
$ ( document ) . klaar ( functie ( ) {
$ ( 'knop' ) . Klik ( functie ( ) {
$ ( '#mijnDiv' ) . fade-out ( 'langzaam' ) ;
} ) ;
} ) ;
script >Nu de ' fade-out() 'methode passeert de' langzaam ”-waarde als parameter om het fade-out-effect soepel te creëren, d.w.z. de status van het geselecteerde div-element verandert van zichtbaar naar verborgen.
Uitvoer
U kunt zien dat het geselecteerde div-element zich langzaam verbergt als u op de knop klikt.
Voorbeeld 3: Creëer vloeiende fade-outeffecten met de parameter fadeOut() “duration”.
In dit voorbeeld wordt de methode “fadeOut()” toegepast met een specifiek aantal milliseconden als duurparameter:
< script >
$ ( document ) . klaar ( functie ( ) {
$ ( 'knop' ) . Klik ( functie ( ) {
$ ( '#mijnDiv' ) . fade-out ( 6000 ) ;
} ) ;
} ) ;
script >Nu gebruikt de “fadeOut()”-methode het opgegeven aantal milliseconden om het overeenkomende element binnen de gegeven tijdsduur te verbergen.
Uitvoer
De bovenstaande uitvoer verbergt de gegeven wijzigingen in het div-element na een klik op de knop in een bepaald tijdsinterval.
Voorbeeld 4: Creëer vloeiende fade-outeffecten met de fadeOut() “callback”-functie
Dit voorbeeld voert een callback-functie uit na voltooiing van het fade-out-effect via de “fadeOut()” -methode:
< script >
$ ( document ) . klaar ( functie ( ) {
$ ( 'knop' ) . Klik ( functie ( ) {
$ ( '#mijnDiv' ) . fade-out ( 4000 , functie ( ) {
troosten. loggen ( 'Gegeven div-element is succesvol verborgen!' )
} ) ;
} ) ;
} ) ;
script >In het genoemde codeblok:
- De ' fade-out() '-methode vervaagt het overeenkomende div-element in een specifiek aantal milliseconden en voert vervolgens de meegeleverde 'callback'-functie uit.
- Binnen in de ' Bel terug '-functie, de' console.log() De methode wordt toegepast om de opgegeven instructie weer te geven na voltooiing van het “fade-out”-effect.
Uitvoer
Het is te zien dat de “console” een instructie toont die is gedefinieerd in de callback-functie na het verbergen van het gegeven div-element.
Voorbeeld 5: Creëer vloeiende fade-outeffecten met de parameter fadeOut() “easing”.
In dit voorbeeld wordt de methode “fadeOut()” toegepast met de mogelijke waarden van de parameter “easing”:
< script >
$ ( document ) . klaar ( functie ( ) {
$ ( 'knop' ) . Klik ( functie ( ) {
$ ( '#mijnDiv' ) . fade-out ( 4000 , 'lineair' ) ;
} ) ;
} ) ;
script >Nu de ' fade-out() ”-methode voert het fade-out-effect uit in een specifiek aantal milliseconden en met een constante snelheid vanwege de “ lineair ' waarde.
Uitvoer
De uitvoer verandert de gegeven elementstatus van zichtbaar naar verborgen met een constante snelheid. Dat is het voor het implementeren van het “fade-out” effect op het element.
Conclusie
Om een vloeiend fade-outeffect te creëren met behulp van jQuery's ' fade-out() ”-methode heeft de gebruiker geen extra parameter nodig. Deze methode vervaagt, d.w.z. verbergt het element geleidelijk door de dekking ervan te veranderen. Als de gebruiker een fade-out-effect moet uitvoeren in een specifiek aantal milliseconden, voer dan een callback-functie uit en gebruik vervolgens de parameters 'speed', 'easing' en 'callback' met de methode 'fadeOut()'. In dit bericht werd praktisch de fadeOut()-methode van jQuery uitgelegd voor het creëren van een vloeiend fade-out-effect.