Tento príspevok vysvetlí praktickú implementáciu metódy fadeOut () jQuery na vytvorenie hladkého efektu vyblednutia.
Ako vytvoriť plynulé efekty vyblednutia pomocou metódy fadeOut () jQuery?
jQuery“ vyblednúť() ” metóda skryje vybraný prvok postupne znižovaním jeho nepriehľadnosti. Táto metóda zmení stav vybraného prvku z viditeľného na skrytý. Skrytý prvok sa na webovej stránke nezobrazí, kým ho používateľ znova nezobrazí pomocou „ fadeIn() “.
Syntax
$ ( selektor ) . vyblednúť ( rýchlosť, uľahčenie, spätné volanie ) ;
Vyššie uvedená syntax podporuje nasledujúce voliteľné parametre na prispôsobenie efektu zoslabenia:
- rýchlosť: Špecifikuje rýchlosť miznutia v milisekundách. Štandardne je jeho hodnota „400 ms“. Navyše podporuje aj dve vstavané hodnoty „pomaly“ a „rýchlo“.
- uvoľnenie: Zobrazuje rýchlosť miznutia animácie v rôznych bodoch. V predvolenom nastavení je jeho hodnota „swing (pomalšie na začiatku/na konci a pomaly v strede)“. Okrem toho funguje aj na „lineárnej (konštantná rýchlosť v miznúcej animácii)“.
- zavolaj späť: Definuje užívateľom definovanú funkciu, ktorá sa vykoná po dokončení animácie miznutia na vykonanie definovanej úlohy.
Využime vyššie uvedený spôsob prakticky.
HTML kód
Pred prechodom na metódu „fadeOut()“ si pozrite nasledujúci kód HTML, ktorý vytvára vzorový prvok „div“, na ktorom sa vykoná efekt zoslabenia:
< tlačidlo > vyblednúť ( Skryť Element ) tlačidlo < br < br >< div id = 'myDiv' štýl = 'výška: 80px; šírka: 300px;okraj: 2px plná čierna; okraj: automaticky; zarovnanie textu: na stred' >
< h2 > Vitajte v Linuxhint h2 >
div >
Vo vyššie uvedených riadkoch kódu:
- '
” tag pridáva prvok tlačidla. - ' Značka ” vytvára prvok div s id „myDiv“ a upravuje sa pomocou nasledujúcich vlastností štýlu (výška, šírka, okraj, okraj, zarovnanie textu).
- Vo vnútri divu je „ Značka ” určuje prvý prvok podnadpisu úrovne 2.
Teraz začnite prvým príkladom.
Príklad 1: Vytvorte plynulé efekty zoslabovania s predvolenou hodnotou fadeOut()
Prvý príklad skryje zhodný prvok div použitím metódy „fadeOut()“ s predvolenou hodnotou „400 ms“:
< skript >
$ ( dokument ) . pripravený ( funkciu ( ) {
$ ( 'tlačidlo' ) . kliknite ( funkciu ( ) {
$ ( '#myDiv' ) . vyblednúť ( ) ;
} ) ;
} ) ;
skript >Vo vyššie uvedených riadkoch kódu:
- Po prvé, „ pripravený() ” vykoná dané funkcie pri načítaní aktuálneho HTML dokumentu/DOM.
- Ďalej, „ klikni() ” metóda vykoná prepojenú funkciu po kliknutí na tlačidlo, keď sa klikne na príslušný selektor “tlačidla”.
- Potom sa „ vyblednúť() ” skryje prístupný prvok div, ktorého id je „myDiv“ za 400 ms, t. j. predvolená hodnota.
Výkon
Zistilo sa, že kliknutím na dané tlačidlo sa prvok div postupne vytratí za „400 ms“.
Príklad 2: Vytvorte hladké efekty zoslabovania pomocou parametra fadeOut() „speed“
Tento príklad používa metódu „fadeOut()“ so vstavanými hodnotami (pomaly/rýchlo) parametra „speed“:
< skript >
$ ( dokument ) . pripravený ( funkciu ( ) {
$ ( 'tlačidlo' ) . kliknite ( funkciu ( ) {
$ ( '#myDiv' ) . vyblednúť ( 'pomaly' ) ;
} ) ;
} ) ;
skript >Teraz, „ vyblednúť() “metóda prechádza cez “ pomaly ” ako jeho parameter na plynulé vytvorenie efektu miznutia, t. j. zmena stavu vybraného prvku div z viditeľného na skrytý.
Výkon
Je vidieť, že vybraný prvok div sa po kliknutí na tlačidlo pomaly skryje.
Príklad 3: Vytvorte efekty plynulého zoslabovania pomocou parametra fadeOut() „duration“
Tento príklad používa metódu „fadeOut()“ so špecifickým počtom milisekúnd ako parametrom trvania:
< skript >
$ ( dokument ) . pripravený ( funkciu ( ) {
$ ( 'tlačidlo' ) . kliknite ( funkciu ( ) {
$ ( '#myDiv' ) . vyblednúť ( 6000 ) ;
} ) ;
} ) ;
skript >Teraz metóda „fadeOut()“ používa zadaný počet milisekúnd na skrytie zhodného prvku v danom časovom trvaní.
Výkon
Vyššie uvedený výstup skryje zmeny daného prvku div po kliknutí na tlačidlo v danom časovom intervale.
Príklad 4: Vytvorte plynulé efekty zoslabovania pomocou funkcie fadeOut() „callback“
Tento príklad vykoná funkciu spätného volania po dokončení efektu zoslabenia pomocou metódy „fadeOut()“:
< skript >
$ ( dokument ) . pripravený ( funkciu ( ) {
$ ( 'tlačidlo' ) . kliknite ( funkciu ( ) {
$ ( '#myDiv' ) . vyblednúť ( 4000 , funkcia ( ) {
konzoly. log ( 'Zadaný prvok div je úspešne skrytý!' )
} ) ;
} ) ;
} ) ;
skript >V uvedenom bloku kódu:
- ' vyblednúť() ” metóda vybledne zhodný prvok div za určitý počet milisekúnd a potom vykoná poskytnutú funkciu spätného volania.
- Vnútri ' zavolaj späť “, funkcia “ console.log() ” metóda sa použije na zobrazenie špecifikovaného príkazu po dokončení efektu „fade-out“.
Výkon
Je vidieť, že „konzola“ zobrazuje príkaz definovaný vo funkcii spätného volania po skrytí daného prvku div.
Príklad 5: Vytvorte efekty plynulého zoslabovania pomocou parametra fadeOut() „uvoľnenie“
V tomto príklade je použitá metóda „fadeOut()“ s možnými hodnotami parametra „easing“:
< skript >
$ ( dokument ) . pripravený ( funkciu ( ) {
$ ( 'tlačidlo' ) . kliknite ( funkciu ( ) {
$ ( '#myDiv' ) . vyblednúť ( 4000 , 'lineárny' ) ;
} ) ;
} ) ;
skript >Teraz, „ vyblednúť() Metóda ”vykonáva efekt zoslabenia za určitý počet milisekúnd pri konštantnej rýchlosti z dôvodu “ lineárne “hodnota.
Výkon
Výstup mení stav daného prvku z viditeľného na skrytý konštantnou rýchlosťou. To je všetko na implementáciu efektu „fade-out“ na prvku.
Záver
Na vytvorenie efektu plynulého vyblednutia pomocou jQuery „ vyblednúť() “, používateľ nevyžaduje žiadne ďalšie parametre. Táto metóda mizne, t. j. skryje prvok postupne zmenou jeho nepriehľadnosti. Ak používateľ potrebuje vykonať efekt zoslabenia v určitom počte milisekúnd, vykonajte funkciu spätného volania a potom použite parametre „rýchlosť“, „zvoľnenie“ a „spätné volanie“ s metódou „fadeOut()“. Tento príspevok prakticky vysvetlil metódu fadeOut() jQuery na vytvorenie hladkého efektu slabnutia.