Šajā rakstā tiks izskaidrota jQuery fadeOut() metodes praktiskā ieviešana vienmērīga izbalēšanas efekta radīšanai.
Kā izveidot vienmērīgus izbalēšanas efektus, izmantojot jQuery fadeOut() metodi?
jQuery's izbālēt() ” metode paslēpj atlasīto elementu pakāpeniski, samazinot tā necaurredzamību. Šī metode maina atlasītā elementa stāvokli no redzama uz slēptu. Slēptais elements netiek rādīts tīmekļa lapā, līdz lietotājs to atkal parāda, izmantojot ' fadeIn() ” metode.
Sintakse
$ ( atlasītājs ) . izbālēt ( ātrums, atvieglošana, atzvanīšana ) ;
Iepriekš minētā sintakse atbalsta šādus izvēles parametrus, lai pielāgotu izbalēšanas efektu:
- ātrums: Tas norāda izbalēšanas efekta ātrumu milisekundēs. Pēc noklusējuma tā vērtība ir “400 ms”. Turklāt tas atbalsta arī divas iebūvētās vērtības “lēns” un “ātrs”.
- atvieglošana: Tas parāda izzūdošo animācijas ātrumu dažādos punktos. Pēc noklusējuma tā vērtība ir “swing (lēnāks sākumā/beigās un lēnāks vidū)”. Turklāt tas darbojas arī 'lineārā (nemainīgā ātrumā izbalējošā animācijā)'.
- atzvani: Tas definē lietotāja definētu funkciju, kas tiek izpildīta pēc izbalēšanas animācijas pabeigšanas, lai veiktu definēto uzdevumu.
Izmantosim iepriekš definēto metodi praktiski.
HTML kods
Pirms pāriet uz metodi “fadeOut()”, apskatiet šo HTML kodu, kas izveido “div” elementa paraugu, kuram tiks veikts izbalēšanas efekts:
< pogu > izbālēt ( Slēpt Elements ) pogu >< br >< br >< div id = 'myDiv' stils = 'augstums: 80 pikseļi; platums: 300 pikseļi; apmale: 2 pikseļi, vienkrāsains melns; piemale: automātiski; teksta līdzināšana: centrā' >
< h2 > Laipni lūdzam Linuxhint h2 >
div >
Iepriekš minētajās koda rindās:
- '
” tags pievieno pogas elementu. - ' ” tags izveido div elementu ar ID “myDiv”, un tiek veidots, izmantojot šādas stila īpašības (augstums, platums, apmale, piemale, teksta līdzinājums).
- Divpuses iekšpusē ' ” tags norāda 2. līmeņa pirmo apakšvirsraksta elementu.
Tagad sāciet ar pirmo piemēru.
1. piemērs. Izveidojiet vienmērīgus izbalēšanas efektus ar fadeOut() noklusējuma vērtību
Pirmajā piemērā tiek paslēpts atbilstošais div elements, izmantojot metodi “fadeOut()” ar noklusējuma vērtību “400ms”:
< skripts >
$ ( dokumentu ) . gatavs ( funkciju ( ) {
$ ( 'poga' ) . klikšķis ( funkciju ( ) {
$ ( '#myDiv' ) . izbālēt ( ) ;
} ) ;
} ) ;
skripts >Iepriekš minētajās koda rindās:
- Pirmkārt, ' gatavs () ” metode izpilda dotās funkcijas, kad tiek ielādēts pašreizējais HTML dokuments/DOM.
- Tālāk “ klikšķis() ” metode izpilda saistīto funkciju, noklikšķinot uz pogas, kad tiek noklikšķināts ar to saistītās pogas atlasītājs.
- Pēc tam ' izbālēt() ” metode slēpj pieejamo div elementu, kura ID ir “myDiv” 400 ms, t.i., noklusējuma vērtība.
Izvade
Tiek novērots, ka dotais pogas klikšķis “400 ms” laikā pakāpeniski izgaist div elementu.
2. piemērs: izveidojiet vienmērīgus izbalēšanas efektus ar parametru fadeOut() “speed”
Šajā piemērā tiek izmantota metode “fadeOut()” ar parametra “speed” iebūvētajām vērtībām (slow/fast):
< skripts >
$ ( dokumentu ) . gatavs ( funkciju ( ) {
$ ( 'poga' ) . klikšķis ( funkciju ( ) {
$ ( '#myDiv' ) . izbālēt ( 'lēns' ) ;
} ) ;
} ) ;
skripts >Tagad “ izbālēt() ' metode iztur ' lēns ” vērtību kā savu parametru, lai vienmērīgi izveidotu izbalēšanas efektu, t.i., mainītu atlasītā div elementa stāvokli no redzama uz slēptu.
Izvade
Redzams, ka atlasītais div elements lēnām paslēpjas, noklikšķinot uz pogas.
3. piemērs: izveidojiet vienmērīgus izbalēšanas efektus, izmantojot parametru fadeOut() “duration”
Šajā piemērā tiek izmantota metode “fadeOut()” ar noteiktu milisekunžu skaitu kā ilguma parametru:
< skripts >
$ ( dokumentu ) . gatavs ( funkciju ( ) {
$ ( 'poga' ) . klikšķis ( funkciju ( ) {
$ ( '#myDiv' ) . izbālēt ( 6000 ) ;
} ) ;
} ) ;
skripts >Tagad metode “fadeOut()” izmanto norādīto milisekunžu skaitu, lai paslēptu atbilstošo elementu noteiktā laika periodā.
Izvade
Iepriekšējā izvade slēpj dotās div elementa izmaiņas, noklikšķinot uz pogas noteiktā laika intervālā.
4. piemērs: izveidojiet vienmērīgus izbalēšanas efektus, izmantojot fadeOut() “atzvanīšanas” funkciju
Šis piemērs izpilda atzvanīšanas funkciju pēc izbalēšanas efekta pabeigšanas, izmantojot metodi “fadeOut()”:
< skripts >
$ ( dokumentu ) . gatavs ( funkciju ( ) {
$ ( 'poga' ) . klikšķis ( funkciju ( ) {
$ ( '#myDiv' ) . izbālēt ( 4000 , funkcija ( ) {
konsole. žurnāls ( 'Dotais div elements ir veiksmīgi paslēpts!' )
} ) ;
} ) ;
} ) ;
skripts >Norādītajā koda blokā:
- ' izbālēt() ” metode izgaiso atbilstošo div elementu noteiktā milisekunžu laikā un pēc tam izpilda paredzēto “atzvanīšanas” funkciju.
- Iekšpusē ' atzvani ' funkcija, ' console.log() ” metode tiek izmantota, lai parādītu norādīto paziņojumu pēc “fade-out” efekta pabeigšanas.
Izvade
Redzams, ka pēc dotā div elementa paslēpšanas “konsole” parāda atzvanīšanas funkcijā definētu paziņojumu.
5. piemērs: izveidojiet vienmērīgus izbalināšanas efektus, izmantojot parametru fadeOut() “easing”
Šajā piemērā tiek izmantota metode “fadeOut()” ar iespējamām parametra “easing” vērtībām:
< skripts >
$ ( dokumentu ) . gatavs ( funkciju ( ) {
$ ( 'poga' ) . klikšķis ( funkciju ( ) {
$ ( '#myDiv' ) . izbālēt ( 4000 , 'lineārs' ) ;
} ) ;
} ) ;
skripts >Tagad “ izbālēt() ” metode veic izbalēšanas efektu noteiktā milisekundē ar nemainīgu ātrumu, jo lineārs ” vērtību.
Izvade
Izvade maina dotā elementa stāvokli no redzama uz slēptu nemainīgā ātrumā. Tas ir paredzēts elementa “izbalināšanas” efekta ieviešanai.
Secinājums
Lai izveidotu vienmērīgu izbalēšanas efektu, izmantojot jQuery “ izbālēt() ” metodi, lietotājam nav nepieciešami nekādi papildu parametri. Šī metode izzūd, t.i., elementu paslēpj pakāpeniski, mainot tā necaurredzamību. Ja lietotājam ir nepieciešams veikt izbalēšanas efektu noteiktā milisekunžu skaitā, izpildiet atzvanīšanas funkciju un pēc tam izmantojiet parametrus “ātrums”, “atvieglināšana” un “atzvanīšana” ar metodi “fadeOut()”. Šajā ziņā praktiski tika izskaidrota jQuery fadeOut () metode vienmērīga izbalēšanas efekta radīšanai.