Az animáció a modern weboldalakon régóta magától értetődőnek számít. Feloldódó elemek, repülő üzenetek, csúszó képgalériák javítják a felhasználói élményt és növelik az oldal teljesítményét. A népszerű jQuery JavaScript-könyvtárban a fadeIn() az egyik alapvető animációs funkció. Ez szabályozza a blokkok átlátszóságát.
fade hatások
A fadeIn() metódus biztosítja, hogy a neki átadott elem átlátszósága 100%-ra változzon. A jQuery könyvtárban a fadeOut() függvénnyel van párosítva, amivel nullázható az átlátszóság és ezáltal "feloldható" az elem.
Érdekelni fog:
Hasonló hatást érhetünk el a fadeTo() metódussal is, aminek még szélesebb a hatása. A FadeTo() bármilyen átlátszósági értéket beállíthat 0 és 1 között.
Módszer Szintaxis
A jQuery fadeIn() metódusa annak az elemnek a környezetében kerül meghívásra, amelynek az átlátszóságát módosítani kell. Ez nullától három paraméterig terjedhet:
element.fadeIn(); elem.fadeIn(duration); element.fadeIn(időtartam, visszahívás); element.fadeIn(időtartam, lazítás, visszahívás); element.fadeIn(config);
Az időtartam argumentum határozza meg, hogy mennyi időt vesz igénybe az animáció. Ez lehet egy szám, amely az ezredmásodpercek számát jelöli, vagy a következő kulcsszavak egyike:
- "gyors" (200 ms);
- "lassú" (600 ms);
Ha az időtartam nincs beállítva, az alapértelmezett érték 400 ezredmásodperc.
A visszahívási paraméter megad egy függvényt, amely közvetlenül az animáció befejezése után kerül meghívásra. A visszahívási funkció nem fogad el semmilyen paramétert. A benne lévő ez a változó a módosítandó DOM csomópontra utal.
Az enyhítő argumentum szabályozza az animáció időzítési függvényét, azaz sebességét az időben. Ezzel felgyorsíthatod az animáció elejét és lelassíthatod a végét, vagy egységessé teheted az egészet. Az argumentum értéke a kulcsszót tartalmazó karakterlánc, az alapértelmezett a "swing" függvény.
A következő példában a jQuery fadeIn() egyenletesen növeli egy .block osztályú elem átlátszóságát egy másodpercig, majd egy üzenetet nyomtat a konzolra:
$(.block").fadeIn(1000, lineáris, function() ( console.log("Animáció kész"); ));
Ha a felsorolt paraméterek nem elegendőek, akkor átadhatjuk a metódusnak a config objektumot, amely akár 11 különböző beállítást is tartalmazhat.
Visszahívások
A jQuery fadeIn() metódusnak átadott visszahívási paraméter nagyon hasznos lehetőség, mivel a tulajdonságváltozás aszinkron, anélkül, hogy blokkolná a teljes kódfolyamot.
const callback = function() ( console.log("Animáció kész"); ); $(".elem").fadeIn(1000); visszahív();
Ebben a példában a függvény az animáció elindítása után azonnal lefut, anélkül, hogy megvárná az elem teljes megjelenését.
Ahhoz, hogy minden rendeltetésszerűen működjön, a visszahívási argumentumot kell használnia az animáció végére:
const callback = function() ( console.log("Animáció kész"); ); $(".elem").fadeIn(1000, visszahívás);
Most a konzolnak küldött üzenet csak akkor jelenik meg, ha az elem teljesen láthatóvá válik.
Teljes átlátszóság és az elem elrejtése
Mint ismeretes, az opacitás tulajdonság nulla értéke nem távolítja el az elemet az oldalról, csak láthatatlanná teszi. Ez a viselkedés nem megfelelő, ha el akarunk rejteni valamilyen blokkot.
Ez az oka annak, hogy a jQuery fade metódusai fadeIn(), fadeTo() és fadeOut() működnek az átlátszóság mellett a megjelenítési tulajdonsággal kombinálva. Egy teljesen átlátszó elem el van rejtve a kijelzőn: nincs szabály, és mielőtt megjelenne, ez a szabály törlődik.
Módosítja a kiválasztott elemek átlátszósági szintjét az oldalon. Lehetővé teszi az átlátszóság zökkenőmentes megváltoztatását. A módszernek két felhasználási módja van:
időtartama— az átláthatóság változásának időtartama. Megadható ezredmásodpercben vagy a "gyors" vagy "lassú" karakterlánc értéke (200 és 600 ezredmásodperc).
átlátszatlanság— a szükséges átlátszóság értéke. 0 és 1 közötti számként kell megadni (0 - teljes átlátszóság, 1 - nincs átlátszóság).
visszahív az átlátszóság-módosítás befejezési kezelőjeként megadott függvény. Paramétereket nem adnak át neki, viszont a függvényen belül ez a változó tartalmazza annak az elemnek a DOM objektumát, amelynek az átlátszóságát megváltoztatjuk. Ha több ilyen elem is van, akkor a kezelő minden elemhez külön kerül meghívásra.
időtartama- lásd fent a leírást. Alapértelmezés szerint a paraméter 400
átlátszatlanság- lásd fent.
enyhülés- az átlátszóság változásának dinamikája (lelassul-e a futás végére, vagy éppen ellenkezőleg, felgyorsul). (lásd a leírást)
visszahív- lásd fent.
- az átláthatóság megváltoztatása
- állítsa be egy elem átlátszóságát
- beállíthatja egy elem átlátszósági szintjét
- elem átlátszósága
- .fadeTo()
- fadeTo()
Ebben az oktatóanyagban egy példát nézünk meg A jQuery átlátszósága megváltozik. Hasonló témákról már volt szó a leckében, nos, ott a forgatókönyv elve egy egyszerűre épült cssés html, ebben a leckében kitérünk arra is jQuery plusz minden, volt egy egyszerű változás a képen a lebegéssel, az átlátszóság azonnal végrehajtódik ( átlátszatlanság).
Azt hiszem, már megnéztél két demót, és megértetted a különbséget a szkriptek működésében. Nézzük most ennek az oktatóanyagnak a kódját.
Első lépés. HTML.
Tehát van egy aktánk index.php.
Ebben először a jquery.js könyvtárat vesszük fel. Töltse le saját magának, és csatlakozzon a címkék között fej.
Ezután elemezzük jQuery kód, amely kölcsönhatásba lép az osztállyal img. Először írunk egy függvényt, amelynek van osztálya imgés állítsa be az átláthatóságot 50% eredeti helyzetben. Vagyis egy kép anélkül, hogy rámutatna, átlátszóságának fele megvan. Ezután, amikor egy lebegtetési műveletet hajtanak végre a képen, egy függvényt hívnak meg, amely megváltoztatja az osztály pozícióját img a tiszta helyzetbe. A képre mutatás befejezése után a funkció a kezdeti kezdeti pozícióba kapcsol. Kép átlátszóság attribútum átlátszatlanság. Részletesen tanulmányozhatja a dokumentumban css.
$(function() ( // állítsa be a kép átlátszatlanságát 50%-ra $(.img").css("opacity","0.5"); // vigye az egérmutatót a kép fölé $(.img"). hover( function () ( // ami után az átlátszóság eltűnik $(this).stop().animate(( opacitás: 1.0 ), "slow"); ), // miután eltávolította az egeret a kép függvény fölé () ( // az átlátszóság visszatér az eredeti pozícióba 50% $(this).stop().animate(( opacitás: 0,5 ), "lassú"); )); ));
Második lépés. CSS stílusú fájl.
Regisztráljuk a címkét divés adj neki egy osztályt képeket megadunk benne néhány stílust css a képhez (ha akarod, jobb, ha megnézed, hogyan működik ez a szkript). Most írja be a címkét img ebben megadjuk a kép elérési útját és beállítjuk az osztályt img, amely kölcsönhatásba lép vele jQuery fenti kódot.
Kevés stílus css a jobb láthatóság érdekében.
Képek (szegély: 1px tömör #363636; szélesség: 300px; háttérszín: #2d2d2d; kitöltés: 8px; )
A forgatókönyv egyfajta egyszerű, ami relevánsabbá teszi az alkalmazást az átláthatóság változásai lebegő képek. Azt tanácsolom, játssz vele jQuery kódot, ahol három funkció van: kezdő, hover és unhover. Változatosságot mutathatsz. Tegyük fel, hogy a kezdeti helyzetben adja meg átlátszatlanság 0,5, lebegve átlátszatlanság 1.0, valamint az útmutatás eltávolításától átlátszatlanság 0,2. Egyfajta nagyon érdekes akció lesz a képpel!
És ismét üdvözlöm a blog kedves olvasóit. Ma szeretném elmondani, hogyan kell elkészíteni a webhely bármely elemének sima átláthatósága a jQuery használatával. Mit jelent ez bármely elem esetében? Ez azt jelenti, hogy ezt az átlátszóságot bármilyen képre, számlálóra és címkére alkalmazhatja a webhelyen. Mindez csak díszíteni fogja az erőforrást. Tehát kezdjük.
Hadd emlékeztesselek arra, hogy a megaweb.su megosztotta velünk a forgatókönyvet, amit nagyon köszönünk neki.
Forgatókönyv
A legelső teendő az, hogy a könyvtárat is be kell vonni jQuery, abban az értelemben a szkript, amelyet alá kell helyeznie a címkék közé és .
Aztán közvetlenül a címke előtt másolja és illessze be a következőket jQuery szkript:
Másolt? Gratulálok, a munka nagy részét már elvégezted :-)
Szkript beállítása
Teljesen testreszabhatja ezt a szkriptet ízlése szerint.
- $('.megaweb') annak az osztálynak a neve, amelyet a webelemekre alkalmazni fognak;
- animált((átlátszatlanság:'0,3'),1);- ez az elem legoptimálisabb átlátszósága;
- animált((átlátszatlanság:'1.0'),600);- a webelem átlátszósága lebegve;
- anim((átlátszatlanság:'0,3'),300);- az elem visszaállítása a legelső átlátszóságba, miután a kurzort eltávolította az elemről.
Miután szükségünk szerint konfiguráltuk a szkriptet, például egy osztály segítségével alkalmazható webdesign elemekre.
