Tento příspěvek vysvětlí praktickou implementaci metody fadeOut() jQuery pro vytvoření hladkého efektu slábnutí.
Jak vytvořit hladké efekty Fade-Out pomocí metody fadeOut() jQuery?
jQuery' odeznít() Metoda ” skryje vybraný prvek postupně snižováním jeho krytí. Tato metoda změní stav vybraného prvku z viditelného na skrytý. Skrytý prvek se na webové stránce nezobrazí, dokud jej uživatel znovu nezobrazí pomocí „ fadeIn() “ metoda.
Syntax
$ ( volič ) . odeznít ( rychlost, zmírnění, zpětné volání ) ;
Výše uvedená syntaxe podporuje následující volitelné parametry pro přizpůsobení efektu slábnutí:
- Rychlost: Udává rychlost efektu slábnutí v milisekundách. Ve výchozím nastavení je jeho hodnota „400 ms“. Navíc také podporuje dvě vestavěné hodnoty „pomalu“ a „rychle“.
- uvolnění: Ukazuje rychlost mizení animace v různých bodech. Ve výchozím nastavení je jeho hodnota „swing (pomalejší na začátku/na konci a pomalý uprostřed)“. Kromě toho funguje také na „lineární (konstantní rychlost v mizející animaci)“.
- zpětné volání: Definuje uživatelem definovanou funkci, která se provede po dokončení animace slábnutí, aby provedla definovanou úlohu.
Použijme výše uvedenou metodu prakticky.
HTML kód
Než přejdete k metodě „fadeOut()“, podívejte se na následující kód HTML, který vytváří ukázkový prvek „div“, na kterém se provede efekt zeslabení:
< knoflík > odeznít ( Skrýt Živel ) knoflík < br < br >< div id = 'myDiv' styl = 'výška: 80px; šířka: 300px;okraj: 2px plná černá; okraj: auto; zarovnání textu: na střed' >
< h2 > Vítejte v Linuxhintu h2 >
div >
Ve výše uvedených řádcích kódu:
- '
” přidá prvek tlačítka. - ' Značka ” vytváří prvek div s id „myDiv“ a stylizuje se pomocí následujících vlastností stylu (výška, šířka, okraj, okraj, zarovnání textu).
- Uvnitř divu je „ Značka ” určuje první prvek podnadpisu úrovně 2.
Nyní začněte prvním příkladem.
Příklad 1: Vytvořte plynulé efekty fade-out s výchozí hodnotou fadeOut()
První příklad skryje odpovídající prvek div použitím metody „fadeOut()“ s výchozí hodnotou „400ms“:
< skript >
$ ( dokument ) . připraven ( funkce ( ) {
$ ( 'knoflík' ) . klikněte ( funkce ( ) {
$ ( '#myDiv' ) . odeznít ( ) ;
} ) ;
} ) ;
skript >Ve výše uvedených řádcích kódu:
- Za prvé, „ připraven() Metoda ” provede dané funkce při načtení aktuálního HTML dokumentu/DOM.
- Dále, „ klikni() Metoda ” provede propojenou funkci po kliknutí na tlačítko, když se klepne na příslušný selektor tlačítka.
- Poté se „ odeznít() ” metoda skryje přistupovaný prvek div, jehož id je „myDiv“ za 400 ms, tj. výchozí hodnota.
Výstup
Je pozorováno, že kliknutím na dané tlačítko postupně zmizí prvek div za „400 ms“.
Příklad 2: Vytvořte plynulé efekty Fade-Out s parametrem fadeOut() „speed“
Tento příklad používá metodu „fadeOut()“ s vestavěnými hodnotami (pomalu/rychle) parametru „speed“:
< skript >
$ ( dokument ) . připraven ( funkce ( ) {
$ ( 'knoflík' ) . klikněte ( funkce ( ) {
$ ( '#myDiv' ) . odeznít ( 'pomalý' ) ;
} ) ;
} ) ;
skript >Nyní, „ odeznít() “ metoda přechází přes “ pomalý ” jako parametr pro hladké vytvoření efektu slábnutí, tj. změnu stavu vybraného prvku div z viditelného na skrytý.
Výstup
Je vidět, že vybraný prvek div se po kliknutí na tlačítko pomalu skryje.
Příklad 3: Vytvořte plynulé efekty roztmívání s parametrem „duration“ fadeOut()
Tento příklad používá metodu „fadeOut()“ s konkrétním počtem milisekund jako parametrem trvání:
< skript >
$ ( dokument ) . připraven ( funkce ( ) {
$ ( 'knoflík' ) . klikněte ( funkce ( ) {
$ ( '#myDiv' ) . odeznít ( 6000 ) ;
} ) ;
} ) ;
skript >Nyní metoda „fadeOut()“ používá zadaný počet milisekund ke skrytí shodného prvku v daném časovém období.
Výstup
Výše uvedený výstup skryje změny daného prvku div po kliknutí na tlačítko v daném časovém intervalu.
Příklad 4: Vytvořte plynulé efekty Fade-Out pomocí funkce fadeOut() „callback“
Tento příklad provede funkci zpětného volání po dokončení efektu zeslabení pomocí metody „fadeOut()“:
< skript >
$ ( dokument ) . připraven ( funkce ( ) {
$ ( 'knoflík' ) . klikněte ( funkce ( ) {
$ ( '#myDiv' ) . odeznít ( 4000 , funkce ( ) {
řídicí panel. log ( 'Daný prvek div je úspěšně skryt!' )
} ) ;
} ) ;
} ) ;
skript >V uvedeném bloku kódu:
- ' odeznít() ” metoda vybledne odpovídající prvek div za určitý počet milisekund a poté provede poskytnutou funkci zpětného volání.
- Uvnitř ' zpětné volání funkce “, “ console.log() ” metoda se použije k zobrazení zadaného příkazu po dokončení efektu „fade-out“.
Výstup
Je vidět, že „console“ po skrytí daného prvku div zobrazuje příkaz definovaný ve funkci zpětného volání.
Příklad 5: Vytvořte plynulé efekty roztmívání s parametrem fadeOut() „easing“
V tomto příkladu je použita metoda „fadeOut()“ s možnými hodnotami parametru „easing“:
< skript >
$ ( dokument ) . připraven ( funkce ( ) {
$ ( 'knoflík' ) . klikněte ( funkce ( ) {
$ ( '#myDiv' ) . odeznít ( 4000 , 'lineární' ) ;
} ) ;
} ) ;
skript >Nyní, „ odeznít() ” metoda provádí efekt zeslabení v určitém počtu milisekund při konstantní rychlosti z důvodu „ lineární “hodnota.
Výstup
Výstup mění daný stav prvku z viditelného na skrytý konstantní rychlostí. To je vše pro implementaci efektu „fade-out“ na prvku.
Závěr
Chcete-li vytvořit efekt plynulého vyblednutí pomocí jQuery „ odeznít() “, uživatel nevyžaduje žádný další parametr. Tato metoda mizí, tj. skrývá prvek postupně změnou jeho krytí. Pokud uživatel potřebuje provést efekt slábnutí v určitém počtu milisekund, spusťte funkci zpětného volání a poté použijte parametry „speed“, „easing“ a „callback“ s metodou „fadeOut()“. Tento příspěvek prakticky vysvětlil metodu fadeOut() jQuery pro vytvoření hladkého efektu slábnutí.