See postitus selgitab jQuery fadeOut() meetodi praktilist rakendamist sujuva fade-out efekti loomiseks.
Kuidas luua sujuvaid tuhmumisefekte, kasutades jQuery fadeOut() meetodit?
jQuery' hääbuma() ” meetod peidab valitud elemendi järk-järgult, vähendades selle läbipaistmatust. See meetod muudab valitud elemendi oleku nähtavast peidetuks. Peidetud elementi ei kuvata veebilehel enne, kui kasutaja kuvab selle uuesti, kasutades ' hajuma() ” meetod.
Süntaks
$ ( valija ) . hääbuma ( kiirus, leevendus, tagasihelistamine ) ;
Ülaltoodud süntaks toetab hägustumise efekti kohandamiseks järgmisi valikulisi parameetreid:
- kiirus: See määrab tuhmumisefekti kiiruse millisekundites. Vaikimisi on selle väärtus '400 ms'. Lisaks toetab see ka kahte sisseehitatud väärtust 'aeglane' ja 'kiire'.
- leevendamine: See näitab hääbuvat animatsiooni kiirust erinevates punktides. Vaikimisi on selle väärtus 'swing (aeglasem alguses/lõpus ja aeglasem keskel)'. Lisaks töötab see ka 'lineaarsel (pidev kiirus hääbuva animatsiooni korral)'.
- helista tagasi: See määratleb kasutaja määratud funktsiooni, mis käivitatakse pärast hääbuva animatsiooni lõpetamist määratletud ülesande täitmiseks.
Kasutame ülaltoodud meetodit praktiliselt.
HTML-kood
Enne 'fadeOut()' meetodi juurde liikumist vaadake järgmist HTML-koodi, mis loob näidiselemendi 'div', millel fade-out efekti teostatakse:
< nuppu > hääbuma ( Peida Element ) nuppu >< br >< br >< divi id = 'myDiv' stiilis = 'kõrgus: 80 pikslit; laius: 300 pikslit; ääris: 2 pikslit, ühtlane must; veeris: automaatne; teksti joondamine: keskel' >
< h2 > Tere tulemast Linuxhinti h2 >
div >
Ülaltoodud koodiridades:
- '
” silt lisab nupuelemendi. - ' ” silt loob div elemendi, mille ID on “myDiv”, ja kujundatakse järgmiste stiiliomaduste abil (kõrgus, laius, ääris, veeris, teksti joondus).
- Divi sees on ' ” märgend määrab 2. taseme esimese alampealkirja elemendi.
Alustage nüüd esimese näitega.
Näide 1: looge sujuvad hääbumisefektid fadeOut() vaikeväärtusega
Esimene näide peidab sobitatud div elemendi, kasutades 'fadeOut()' meetodit selle vaikeväärtusega '400ms':
< stsenaarium >
$ ( dokument ) . valmis ( funktsiooni ( ) {
$ ( 'nupp' ) . klõpsa ( funktsiooni ( ) {
$ ( '#myDiv' ) . hääbuma ( ) ;
} ) ;
} ) ;
stsenaarium >Ülaltoodud koodiridades:
- Esiteks, ' valmis () ” meetod täidab antud funktsioonid, kui praegune HTML-dokument/DOM on laaditud.
- Järgmiseks ' kliki () ” meetod käivitab lingitud funktsiooni nupu klõpsamisel, kui klõpsatakse sellega seotud nupu valijal.
- Pärast seda ' hääbuma() ” meetod peidab juurdepääsetava div elemendi, mille ID on 400 ms, st vaikeväärtus.
Väljund
Täheldatakse, et antud nupuklõps tuhmub div elemendi järk-järgult “400 ms” jooksul.
Näide 2: Looge sujuvad hääbumisefektid parameetriga fadeOut() 'speed'
See näide kasutab meetodit 'fadeOut()' koos parameetri 'speed' sisseehitatud väärtustega (aeglane/kiire):
< stsenaarium >
$ ( dokument ) . valmis ( funktsiooni ( ) {
$ ( 'nupp' ) . klõpsa ( funktsiooni ( ) {
$ ( '#myDiv' ) . hääbuma ( 'aeglane' ) ;
} ) ;
} ) ;
stsenaarium >Nüüd, ' hääbuma() meetod läbib aeglane ” väärtus selle parameetrina, et luua sujuvalt hääbumisefekti, st muudab valitud div elemendi oleku nähtavast peidetuks.
Väljund
On näha, et valitud div element peidab end nupuvajutusega aeglaselt.
Näide 3: Looge sujuvad hääbumisefektid fadeOut() 'duration' parameetriga
See näide rakendab meetodit 'fadeOut()', mille kestuse parameetriks on konkreetne millisekundite arv:
< stsenaarium >
$ ( dokument ) . valmis ( funktsiooni ( ) {
$ ( 'nupp' ) . klõpsa ( funktsiooni ( ) {
$ ( '#myDiv' ) . hääbuma ( 6000 ) ;
} ) ;
} ) ;
stsenaarium >Nüüd kasutab meetod 'fadeOut()' määratud arvu millisekundeid, et peita sobitatud element antud aja jooksul.
Väljund
Ülaltoodud väljund peidab antud div elemendi muudatused, kui nupul klõpsatakse antud ajaintervalli jooksul.
Näide 4: Sujuvate hääbumisefektide loomine fadeOut() 'tagasihelistamise' abil
See näide käivitab tagasihelistamisfunktsiooni, kui fade-out efekt on lõpule viidud meetodi „fadeOut()” kaudu:
< stsenaarium >
$ ( dokument ) . valmis ( funktsiooni ( ) {
$ ( 'nupp' ) . klõpsa ( funktsiooni ( ) {
$ ( '#myDiv' ) . hääbuma ( 4000 , funktsioon ( ) {
konsool. logi ( 'Antud div element on edukalt peidetud!' )
} ) ;
} ) ;
} ) ;
stsenaarium >Määratud koodiplokis:
- ' hääbuma() ” meetod kustutab sobitatud div elemendi teatud millisekundite arvuga ja käivitab seejärel pakutud tagasihelistamisfunktsiooni.
- Sees ' helista tagasi funktsioon, ' console.log() ” meetodit rakendatakse määratud avalduse kuvamiseks pärast „fade-out” efekti lõpetamist.
Väljund
On näha, et “konsool” näitab tagasihelistamise funktsioonis määratletud avaldust pärast antud div elemendi peitmist.
Näide 5: Sujuvate tuhmumisefektide loomine fadeOut() 'easing' parameetriga
See näide rakendab meetodit 'fadeOut()' koos parameetri 'easing' võimalike väärtustega:
< stsenaarium >
$ ( dokument ) . valmis ( funktsiooni ( ) {
$ ( 'nupp' ) . klõpsa ( funktsiooni ( ) {
$ ( '#myDiv' ) . hääbuma ( 4000 , 'lineaarne' ) ;
} ) ;
} ) ;
stsenaarium >Nüüd, ' hääbuma() ” meetod teostab hääbumisefekti teatud millisekundite arvuga konstantsel kiirusel, kuna „ lineaarne ” väärtus.
Väljund
Väljund muudab konstantsel kiirusel antud elemendi olekut nähtavast peidetuks. See on selleks, et rakendada elemendil 'kaotamise' efekti.
Järeldus
Sujuva hääbumisefekti loomiseks, kasutades jQuery ' hääbuma() ” meetodil ei nõua kasutaja täiendavaid parameetreid. See meetod tuhmub, st peidab elemendi järk-järgult, muutes selle läbipaistmatust. Kui kasutajal on vaja teha hääbumisefekti teatud millisekundite arvu jooksul, käivitage tagasihelistamise funktsioon, seejärel kasutage meetodiga 'fadeOut()' parameetreid 'speed', 'easing' ja 'callback'. See postitus selgitas praktiliselt jQuery fadeOut() meetodit sujuva hääbumise efekti loomiseks.