Tämä viesti selittää jQueryn fadeOut()-menetelmän käytännön toteutuksen tasaisen häivytysefektin luomiseksi.
Kuinka luoda tasaisia häivytystehosteita jQueryn fadeOut()-menetelmällä?
jQueryn ' kadota näkyvistä() ” -menetelmä piilottaa valitun elementin asteittain vähentämällä sen opasiteettia. Tämä menetelmä muuttaa valitun elementin tilan näkyvästä piilotetuksi. Piilotettu elementti ei näy verkkosivulla ennen kuin käyttäjä näyttää sen uudelleen käyttämällä ' fadeIn() ”menetelmä.
Syntaksi
$ ( valitsin ) . kadota näkyvistä ( nopeus, helpotus, takaisinsoitto ) ;
Yllä oleva syntaksi tukee seuraavia valinnaisia parametreja häivytystehosteen mukauttamiseen:
- nopeus: Se määrittää häipymisnopeuden millisekunteina. Oletuksena sen arvo on '400 ms'. Lisäksi se tukee myös kahta sisäänrakennettua arvoa 'slow' ja 'fast'.
- helpotus: Se näyttää hiipuvan animaation nopeuden eri kohdissa. Oletuksena sen arvo on 'swing (hitaampi alussa/lopussa ja hidas keskellä)'. Lisäksi se toimii myös 'lineaarisella (vakionopeus häipyvässä animaatiossa)'.
- soita takaisin: Se määrittää käyttäjän määrittämän toiminnon, joka suoritetaan häipyvän animaation suorittamisen jälkeen määritellyn tehtävän suorittamiseksi.
Käytetään yllä määriteltyä menetelmää käytännössä.
HTML-koodi
Ennen kuin siirryt 'fadeOut()'-menetelmään, katso seuraavaa HTML-koodia, joka luo esimerkki 'div'-elementistä, jolle häivytystehoste suoritetaan:
< -painiketta > kadota näkyvistä ( Piilottaa Elementti ) -painiketta >< br >< br >< div id = 'myDiv' tyyli = 'korkeus: 80px; leveys: 300px;reunus: 2px tasainen musta; marginaali: automaattinen; tekstin tasaus: keskellä' >
< h2 > Tervetuloa Linuxhintiin h2 >
div >
Yllä olevilla koodiriveillä:
- '
” -tunniste lisää painikeelementin. - ' ” -tunniste luo div-elementin, jonka tunnus on ”myDiv”, ja se muotoillaan seuraavien tyyliominaisuuksien (korkeus, leveys, reuna, marginaali, tekstin tasaus) avulla.
- Divin sisällä ' ” -tunniste määrittää tason 2 ensimmäisen alaotsikkoelementin.
Aloita nyt ensimmäisestä esimerkistä.
Esimerkki 1: Luo tasaiset häivytystehosteet fadeOut()-oletusarvolla
Ensimmäinen esimerkki piilottaa vastaavan div-elementin käyttämällä 'fadeOut()' -menetelmää sen oletusarvolla '400ms':
< käsikirjoitus >
$ ( asiakirja ) . valmis ( toiminto ( ) {
$ ( 'painike' ) . klikkaus ( toiminto ( ) {
$ ( '#myDiv' ) . kadota näkyvistä ( ) ;
} ) ;
} ) ;
käsikirjoitus >Yllä olevilla koodiriveillä:
- Ensinnäkin ' valmis() ” -menetelmä suorittaa annetut toiminnot, kun nykyinen HTML-dokumentti/DOM ladataan.
- Seuraavaksi ' klikkaus() ' -menetelmä suorittaa linkitetyn toiminnon painiketta napsauttamalla, kun siihen liittyvää 'painikkeen' valitsinta napsautetaan.
- Sen jälkeen ' kadota näkyvistä() ” -menetelmä piilottaa käytetyn div-elementin, jonka tunnus on 'myDiv' 400 ms:ssa eli oletusarvona.
Lähtö
Havaitaan, että annettu painikkeen napsautus häivyttää div-elementin vähitellen “400 ms:ssa”.
Esimerkki 2: Luo tasaiset häivytystehosteet fadeOut() “speed”-parametrilla
Tässä esimerkissä käytetään 'fadeOut()'-menetelmää 'speed'-parametrin sisäänrakennetuilla arvoilla (slow/fast):
< käsikirjoitus >
$ ( asiakirja ) . valmis ( toiminto ( ) {
$ ( 'painike' ) . klikkaus ( toiminto ( ) {
$ ( '#myDiv' ) . kadota näkyvistä ( 'hidas' ) ;
} ) ;
} ) ;
käsikirjoitus >Nyt ' kadota näkyvistä() 'menetelmä läpäisee' hidas ”-arvoa parametrikseen luodakseen sujuvasti häipymisvaikutelman, eli muuttaa valitun div-elementin tilan näkyvästä piilotetuksi.
Lähtö
Voidaan nähdä, että valittu div-elementti piiloutuu hitaasti napin painalluksella.
Esimerkki 3: Luo tasaiset häivytystehosteet fadeOut() “duration” -parametrilla
Tässä esimerkissä käytetään 'fadeOut()'-menetelmää, jonka kestoparametrina on tietty millisekuntien lukumäärä:
< käsikirjoitus >
$ ( asiakirja ) . valmis ( toiminto ( ) {
$ ( 'painike' ) . klikkaus ( toiminto ( ) {
$ ( '#myDiv' ) . kadota näkyvistä ( 6000 ) ;
} ) ;
} ) ;
käsikirjoitus >Nyt 'fadeOut()'-menetelmä käyttää määritettyä millisekuntimäärää piilottaakseen vastaavan elementin tietyn ajan kuluessa.
Lähtö
Yllä oleva tulos piilottaa tietyn div-elementin muutokset, kun painiketta napsautetaan tietyllä aikavälillä.
Esimerkki 4: Luo tasaiset häivytystehosteet fadeOut() 'takaisinkutsu'-funktiolla
Tämä esimerkki suorittaa takaisinkutsun, kun häivytystehoste on suoritettu loppuun 'fadeOut()'-menetelmällä:
< käsikirjoitus >
$ ( asiakirja ) . valmis ( toiminto ( ) {
$ ( 'painike' ) . klikkaus ( toiminto ( ) {
$ ( '#myDiv' ) . kadota näkyvistä ( 4000 , toiminto ( ) {
konsoli. Hirsi ( 'Annettu div-elementti on piilotettu onnistuneesti!' )
} ) ;
} ) ;
} ) ;
käsikirjoitus >Ilmoitetussa koodilohkossa:
- ' kadota näkyvistä() ” -menetelmä häivyttää sovitetun div-elementin tietyssä millisekunnissa ja suorittaa sitten tarjotun takaisinkutsutoiminnon.
- Sisällä ' soita takaisin '-toiminto, ' console.log() ' -menetelmää käytetään määritetyn lauseen näyttämiseen 'fade-out' -tehosteen suorittamisen jälkeen.
Lähtö
Nähdään, että 'konsoli' näyttää takaisinkutsun funktiossa määritellyn käskyn annetun div-elementin piilotuksen jälkeen.
Esimerkki 5: Luo tasaiset häivytystehosteet fadeOut() 'easing' -parametrilla
Tässä esimerkissä käytetään 'fadeOut()'-menetelmää 'easing'-parametrin mahdollisten arvojen kanssa:
< käsikirjoitus >
$ ( asiakirja ) . valmis ( toiminto ( ) {
$ ( 'painike' ) . klikkaus ( toiminto ( ) {
$ ( '#myDiv' ) . kadota näkyvistä ( 4000 , 'lineaarinen' ) ;
} ) ;
} ) ;
käsikirjoitus >Nyt ' kadota näkyvistä() ' -menetelmä suorittaa häivytystehosteen tietyssä millisekuntimäärässä vakionopeudella, koska ' lineaarinen ”arvoa.
Lähtö
Tulos muuttaa annetun elementin tilan näkyvästä piiloon vakionopeudella. Se on se 'fade-out' -vaikutuksen toteuttamiseen elementissä.
Johtopäätös
Luodaksesi tasaisen häivytystehosteen käyttämällä jQueryn ' kadota näkyvistä() ” -menetelmällä, käyttäjä ei vaadi lisäparametreja. Tämä menetelmä häivyttää eli piilottaa elementin asteittain muuttamalla sen opasiteettia. Jos käyttäjän on suoritettava häipymistehoste tietyssä millisekunnissa, suorita takaisinsoittotoiminto ja käytä sitten parametreja 'nopeus', 'kevennys' ja 'takaisinsoitto' 'fadeOut()'-menetelmällä. Tämä viesti käytännössä selitti jQueryn fadeOut()-menetelmän tasaisen häivytystehosteen luomiseksi.