Počítače » Funkce JQuery fadeIn (): změna průhlednosti prvku

Funkce JQuery fadeIn (): změna průhlednosti prvku

Počítače

Animace na moderních webových stránkách se již dávno stala samozřejmým. Rozpouštějící položky, které létají zprávy, galerie obrázkových posuvníků, zlepšují uživatelské zážitky a zvyšují metriky stránek. Oblíbená knihovna javascript jQuery fadeIn () je jednou ze základních animačních funkcí. Řídí průhlednost bloků.

stmívání účinky

Způsob fadeIn () poskytuje transparentnost změnit k ní 100% přenášena. Knihovna jQuery, že je spárován s funkcí fadeOut (), můžete použít jasnou transparentnost a tím i „rozpustit“ položku. Tento efekt lze dosáhnout metodou fadeTo (), jejíž rozsah expozice je ještě širší. FadeTo () může nastavit libovolnou hodnotu průhlednosti v rozmezí od 0 do 1.

Metoda Syntax

Způsob fadeIn () v jQuery použil v souvislosti s položkou, kterou chcete změnit průhlednost. Může mít nula až tři parametry:

element.fadeIn ();
element.fadeIn (trvání);
element.fadeIn (trvání, zpětné volání);
element.fadeIn (trvání, uvolnění, zpětné volání);
element.fadeIn (config);

argument , doba trváníurčuje dobu, po kterou bude podána animace. To může být číslo udávající počet milisekund, nebo jeden z klíčových slov:

& lt; script async = „//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
<- fb_336x280_1 ->

& lt; script & gt; (adsbygoogle = window.adsbygoogle || []) stisknout ({});
  • "rychlé"(200 ms);
  • "pomalý"(600 ms);

Pokud není nastavena doba trvání, bude výchozí hodnota nastavena na 400 milisekund.

Parametrzpětného voláníoznačujefunkce, která bude volána okamžitě po dokončení animace. Funkce zpětného volání parametrů neakceptuje. Tato proměnná v ní odkazuje na uzel proměnné DOM.

Argument uvolněnířídí dočasnou animační funkci, tj. Její rychlost v závislosti na čase. Může urychlit začátek a zpomalit konec animace nebo ji zprůhlednit. Hodnota argumentu je řetězec obsahující klíčové slovo, ve výchozím nastavení tato funkce'swing' .

V následujícím příkladu jQuery fadeIn () se rovnoměrně zvyšuje průhlednost .block prvek s třídou po dobu jedné sekundy a poté zobrazí zprávu v konzole: 

, $ (. 'Blok'). fadeIn (1000 lineární, funkce () {
 console.log ('Animace je kompletní'); 
});

V případě, tyto parametry dostatečně, může být odeslán objektukonfiguračního , které mohou obsahovat až 11 různých nastavení.

& lt; script async = „//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
<- fb_336x280_2 ->

& lt; script & gt; (adsbygoogle = window.adsbygoogle || []) stisknout ({});

Funkce zpětného volání

parametru zpětné volání, prošel jQuery fadeIn (), - velmi užitečná možností, jak změnit vlastnosti vyrobené asynchronně bez ovlivnění celkového toku kódu.

const callback = funkce () {
 console.log ('Animace je kompletní'); 
};
$ ('Prvek') fadeIn (1000);
zpětné volání ();​​

V tomto příkladu je funkce začíná bezprostředně po animaci bez čekání plnou vzhled položky.

To vše fungovalo jak má, musí být tento argument použitzpětné volání , což vám umožní zachytit konecanimace:

const callback = funkce () {
 console.log ('Animace je kompletní'); 
};
$ ('.element') FadeIn (1000 zpětných volání);

Nyní se zpráva v konzole zobrazí pouze v okamžiku, kdy je položka plně viditelná.

Plná průhlednost a skrytí prvku

Jak víte, vlastnost opacitynulové hodnoty neodstraní prvek ze stránky, ale pouze je neviditelný. Takové chování není vhodné, pokud chceme schovat blok.

Proto metody fade v knihovně jQuery: fadeIn (), fadeTo () a fadeOut () pracují s průhledností v kombinaci s vlastností. Úplně průhledný prvek se skrývá pomocí pravidla : žádnýa před tímto pravidlem je toto pravidlo zrušeno.

Související publikace