Această postare va explica implementarea practică a metodei jQuery fadeOut() pentru crearea unui efect de fade-out fluid.
Cum se creează efecte de fade-out fluide folosind metoda fadeOut() a jQuery?
jQuery „ fadeOut() ” metoda ascunde elementul selectat treptat prin scăderea opacității acestuia. Această metodă schimbă starea elementului selectat din vizibil în ascuns. Elementul ascuns nu apare pe pagina web până când utilizatorul nu îl afișează din nou folosind „ fadeIn() ” metoda.
Sintaxă
$ ( selector ) . fadeOut ( viteză, ușurință, apel invers ) ;
Sintaxa de mai sus acceptă următorii parametri opționali pentru a personaliza efectul de fade-out:
- viteză: Specifică viteza efectului de estompare în milisecunde. Valoarea implicită este „400 ms”. În plus, acceptă și două valori încorporate „lent” și „rapid”.
- relaxare: Afișează viteza de decolorare a animației în diferite puncte. În mod implicit, valoarea sa este „swing (mai lent la început/sfârșit și lent la mijloc)”. În plus, funcționează și pe „liniar (viteză constantă în animația de decolorare)”.
- sună din nou: Acesta definește o funcție definită de utilizator care se execută după finalizarea animației de estompare pentru a îndeplini sarcina definită.
Să folosim practic metoda definită mai sus.
Cod HTML
Înainte de a trece la metoda „fadeOut()”, priviți următorul cod HTML care creează un exemplu de element „div” pe care va fi efectuat efectul de fade-out:
< buton > fadeOut ( Ascunde Element ) buton >< br >< br >< div id = 'myDiv' stil = „înălțime: 80 px; lățime: 300 px; chenar: 2 px negru solid; margine: automată; text-align: center” >
< h2 > Bun venit la Linuxhint h2 >
div >
În rândurile de cod de mai sus:
- „
” eticheta adaugă un element buton. - „ Eticheta ” creează un element div având un id „myDiv”, și este stilat cu ajutorul următoarelor proprietăți de stil (înălțime, lățime, chenar, margine, text-align).
- În interiorul div-ului, „ ” eticheta specifică primul element de subtitlu de nivelul 2.
Acum, începeți cu primul exemplu.
Exemplul 1: Creați efecte de fade-out fluide cu fadeOut() Valoare implicită
Primul exemplu ascunde elementul div potrivit utilizând metoda „fadeOut()” cu valoarea sa implicită „400ms”:
< scenariu >
$ ( document ) . gata ( funcţie ( ) {
$ ( 'buton' ) . clic ( funcţie ( ) {
$ ( „#myDiv” ) . fadeOut ( ) ;
} ) ;
} ) ;
scenariu >În liniile de cod de mai sus:
- În primul rând, „ gata() ” metoda execută funcțiile date atunci când documentul HTML/DOM curent este încărcat.
- În continuare, „ clic() ” execută funcția legată la clic pe buton atunci când se face clic pe selectorul „buton” asociat acestuia.
- După aceea, „ fadeOut() ” ascunde elementul div accesat al cărui id este „myDiv” în 400 ms, adică valoarea implicită.
Ieșire
Se observă că clicul pe butonul dat dispare elementul div treptat în „400 ms”.
Exemplul 2: Creați efecte de fade-out fluide cu parametrul „viteză” fadeOut()
Acest exemplu folosește metoda „fadeOut()” cu valorile încorporate (lent/rapid) ale parametrului „viteză”:
< scenariu >
$ ( document ) . gata ( funcţie ( ) {
$ ( 'buton' ) . clic ( funcţie ( ) {
$ ( „#myDiv” ) . fadeOut ( 'încet' ) ;
} ) ;
} ) ;
scenariu >Acum ' fadeOut() ” metoda trece “ încet ” ca parametru pentru a crea fără probleme efectul de fading out, adică schimbă starea elementului div selectat de la vizibil la ascuns.
Ieșire
Se poate observa că elementul div selectat se ascunde încet la clic pe buton.
Exemplul 3: Creați efecte de fade-out fluide cu parametrul „durată” fadeOut()
Acest exemplu aplică metoda „fadeOut()” cu un număr specific de milisecunde ca parametru de durată:
< scenariu >
$ ( document ) . gata ( funcţie ( ) {
$ ( 'buton' ) . clic ( funcţie ( ) {
$ ( „#myDiv” ) . fadeOut ( 6000 ) ;
} ) ;
} ) ;
scenariu >Acum, metoda „fadeOut()” folosește numărul specificat de milisecunde pentru a ascunde elementul potrivit în durata de timp dată.
Ieșire
Ieșirea de mai sus ascunde modificările date ale elementului div la un clic pe buton într-un interval de timp dat.
Exemplul 4: Creați efecte de fade-out fluide cu funcția „callback” fadeOut()
Acest exemplu execută o funcție de apel invers la finalizarea efectului de fade-out prin metoda „fadeOut()”:
< scenariu >
$ ( document ) . gata ( funcţie ( ) {
$ ( 'buton' ) . clic ( funcţie ( ) {
$ ( „#myDiv” ) . fadeOut ( 4000 , funcție ( ) {
consolă. Buturuga ( „Elementul div dat este ascuns cu succes!” )
} ) ;
} ) ;
} ) ;
scenariu >În blocul de cod menționat:
- „ fadeOut() ” metoda estompează elementul div potrivit într-un număr specific de milisecunde și apoi execută funcția „callback” furnizată.
- În interiorul ' sună din nou „, funcția „ console.log() ” este aplicată pentru a afișa declarația specificată după finalizarea efectului de „fade-out”.
Ieșire
Se vede că „consola” arată o declarație definită în funcția de apel invers după ascunderea elementului div dat.
Exemplul 5: Creați efecte de fade-out fluide cu parametrul fadeOut() „facilitare”
Acest exemplu aplică metoda „fadeOut()” cu valorile posibile ale parametrului „easing”:
< scenariu >
$ ( document ) . gata ( funcţie ( ) {
$ ( 'buton' ) . clic ( funcţie ( ) {
$ ( „#myDiv” ) . fadeOut ( 4000 , 'liniar' ) ;
} ) ;
} ) ;
scenariu >Acum ' fadeOut() ” metoda efectuează efectul de fade out într-un număr specific de milisecunde la o viteză constantă din cauza “ liniar ” valoare.
Ieșire
Ieșirea schimbă starea elementului dat de la vizibil la ascuns la o viteză constantă. Asta este pentru implementarea efectului de „fade-out” asupra elementului.
Concluzie
Pentru a crea un efect de estompare uniform folosind jQuery „ fadeOut() ”, utilizatorul nu necesită niciun parametru suplimentar. Această metodă se estompează, adică ascunde elementul treptat, schimbându-i opacitatea. Dacă utilizatorul trebuie să efectueze un efect de fading-out într-un anumit număr de milisecunde, executați o funcție de apel invers, apoi utilizați parametrii „viteză”, „facilitare” și „callback” cu metoda „fadeOut()”. Această postare a explicat practic metoda fadeOut() a jQuery pentru crearea unui efect de estompare lină.