Ta objava bo razložila praktično izvajanje metode fadeOut() jQuery za ustvarjanje gladkega učinka izginjanja.
Kako ustvariti gladke učinke izginjanja z metodo jQuery fadeOut()?
jQueryjev ' zbledeti() ” metoda skrije izbrani element postopoma z zmanjšanjem njegove motnosti. Ta metoda spremeni stanje izbranega elementa iz vidnega v skritega. Skriti element se ne prikaže na spletni strani, dokler ga uporabnik znova ne prikaže z uporabo » fadeIn() ” metoda.
Sintaksa
$ ( selektor ) . zbledeti ( hitrost, popuščanje, povratni klic ) ;
Zgornja sintaksa podpira naslednje neobvezne parametre za prilagoditev učinka izginjanja:
- hitrost: Določa hitrost učinka zbledenja v milisekundah. Privzeta vrednost je '400ms'. Poleg tega podpira tudi dve vgrajeni vrednosti 'slow' in 'fast'.
- popuščanje: Prikazuje hitrost bledenja animacije na različnih točkah. Privzeto je njegova vrednost 'nihanje (počasneje na začetku/koncu in počasi na sredini)'. Poleg tega deluje tudi na 'linearno (konstantna hitrost pri bledeči animaciji)'.
- poklicati nazaj: Definira uporabniško definirano funkcijo, ki se izvede po zaključku pojemanja animacije za izvedbo definirane naloge.
Uporabimo zgoraj opisano metodo praktično.
HTML koda
Preden preidete na metodo »fadeOut()«, si oglejte naslednjo kodo HTML, ki ustvari vzorčni element »div«, na katerem bo izveden učinek izginjanja:
< gumb > zbledeti ( Skrij se Element ) gumb >< št >< št >< div id = 'myDiv' stil = 'višina: 80 slikovnih pik; širina: 300 slikovnih pik; obroba: 2 slikovnih pik polno črna; rob: samodejno; poravnava besedila: sredina' >
< h2 > Dobrodošli v Linuxhintu h2 >
div >
V zgornjih vrsticah kode:
- '
” doda element gumba. - ' ” ustvari element div z ID-jem “myDiv” in je oblikovan s pomočjo naslednjih lastnosti sloga (višina, širina, rob, rob, poravnava besedila).
- Znotraj diva je » ” določa prvi element podnaslova ravni 2.
Zdaj pa začnite s prvim primerom.
1. primer: ustvarite učinke gladkega zatemnitve s privzeto vrednostjo fadeOut().
Prvi primer skrije ujemajoči se element div z uporabo metode »fadeOut()« s privzeto vrednostjo »400ms«:
< scenarij >
$ ( dokument ) . pripravljena ( funkcijo ( ) {
$ ( 'gumb' ) . kliknite ( funkcijo ( ) {
$ ( '#myDiv' ) . zbledeti ( ) ;
} ) ;
} ) ;
scenarij >V zgornjih vrsticah kode:
- Prvič, ' pripravljen() ” metoda izvede dane funkcije, ko je naložen trenutni dokument HTML/DOM.
- Nato je ' klik() ” izvede povezano funkcijo ob kliku gumba, ko je kliknjen njen povezani izbirnik “gumba”.
- Po tem je ' zbledeti() ” metoda skrije dostopni element div, katerega ID je “myDiv” v 400 ms, tj. privzeta vrednost.
Izhod
Opaženo je, da dani klik gumba postopoma zbledi element div v '400 ms'.
2. primer: ustvarite gladke učinke zatemnitve s parametrom »hitrost« fadeOut().
Ta primer uporablja metodo »fadeOut()« z vgrajenimi vrednostmi (počasno/hitro) parametra »hitrost«:
< scenarij >
$ ( dokument ) . pripravljena ( funkcijo ( ) {
$ ( 'gumb' ) . kliknite ( funkcijo ( ) {
$ ( '#myDiv' ) . zbledeti ( 'počasen' ) ;
} ) ;
} ) ;
scenarij >Zdaj pa ' zbledeti() ' metoda prehaja ' počasi ” kot svoj parameter za gladko ustvarjanje učinka izginjanja, tj. spremeni izbrano stanje elementa div iz vidnega v skrito.
Izhod
Vidimo, da se izbrani element div ob kliku na gumb počasi skrije.
Primer 3: Ustvarite gladke učinke zatemnitve s parametrom »trajanje« fadeOut().
Ta primer uporablja metodo »fadeOut()« s posebnim številom milisekund kot parametrom trajanja:
< scenarij >
$ ( dokument ) . pripravljena ( funkcijo ( ) {
$ ( 'gumb' ) . kliknite ( funkcijo ( ) {
$ ( '#myDiv' ) . zbledeti ( 6000 ) ;
} ) ;
} ) ;
scenarij >Zdaj metoda »fadeOut()« uporablja določeno število milisekund, da skrije ujemajoči se element v danem časovnem obdobju.
Izhod
Zgornji izhod skrije dane spremembe elementa div po kliku gumba v danem časovnem intervalu.
Primer 4: Ustvarite gladke učinke zatemnitve s funkcijo povratnega klica fadeOut().
Ta primer izvede funkcijo povratnega klica po zaključku učinka pojemanja prek metode »fadeOut()«:
< scenarij >
$ ( dokument ) . pripravljena ( funkcijo ( ) {
$ ( 'gumb' ) . kliknite ( funkcijo ( ) {
$ ( '#myDiv' ) . zbledeti ( 4000 , funkcija ( ) {
konzola. dnevnik ( 'Dani element div je uspešno skrit!' )
} ) ;
} ) ;
} ) ;
scenarij >V navedenem kodnem bloku:
- ' zbledeti() ” metoda zbledi ujemajoči se element div v določenem milisekundah in nato izvede zagotovljeno funkcijo “povratnega klica”.
- Znotraj ' poklicati nazaj ', funkcija ' console.log() ” se uporabi metoda za prikaz podanega stavka po zaključku učinka „fade-out“.
Izhod
Vidimo, da »konzola« po skrivanju podanega elementa div prikaže stavek, definiran v funkciji povratnega klica.
Primer 5: Ustvarjanje gladkih učinkov zatemnitve s parametrom »easing« fadeOut()
Ta primer uporablja metodo »fadeOut()« z možnimi vrednostmi parametra »easing«:
< scenarij >
$ ( dokument ) . pripravljena ( funkcijo ( ) {
$ ( 'gumb' ) . kliknite ( funkcijo ( ) {
$ ( '#myDiv' ) . zbledeti ( 4000 , 'linearno' ) ;
} ) ;
} ) ;
scenarij >Zdaj pa ' zbledeti() ' izvede učinek izginjanja v določenem milisekundah s konstantno hitrostjo zaradi ' linearni ” vrednost.
Izhod
Izhod spremeni dano stanje elementa iz vidnega v skrito s konstantno hitrostjo. To je vse za izvajanje učinka 'zbledenja' na elementu.
Zaključek
Za ustvarjanje gladkega učinka zbledenja z jQueryjevim ' zbledeti() ”, uporabnik ne potrebuje nobenega dodatnega parametra. Ta metoda zbledi, tj. postopoma skrije element s spreminjanjem njegove motnosti. Če mora uporabnik izvesti učinek pojemanja v določenem milisekundah, izvedite funkcijo povratnega klica, nato pa uporabite parametre »hitrost«, »popuščanje« in »povratni klic« z metodo »fadeOut()«. Ta objava je praktično razložila metodo fadeOut() jQuery za ustvarjanje gladkega učinka izginjanja.