Funkcia JQuery fadeIn (): zmena priehľadnosti elementu

Animácia na moderných webových stránkach sa už dávno stala niečím samozrejmým. Rozpúšťanie položiek, ktoré lietajú správy, posúvače obrázkových galérií, zlepšujú používateľské skúsenosti a zvyšujú metriky stránok. Populárna javascriptová knižnica jQuery fadeIn () je jednou zo základných animačných funkcií. Spravuje transparentnosť blokov.

Fade-effects

Metóda fadeIn () poskytuje zmenu priehľadnosti prenášaného prvku na hodnotu 100%. V knižnici jQuery ide vo dvojiciach s funkciou fadeOut (), pomocou ktorej môžete odstrániť priehľadnosť a tým "rozpustiť" prvok. Tento efekt možno dosiahnuť metódou fadeTo (), ktorej rozsah expozície je ešte širší. FadeTo () môže nastaviť ľubovoľnú hodnotu priehľadnosti v rozmedzí od 0 do 1.

Syntax metódy

Metóda fadeIn () v jQuery sa nazýva v kontexte elementu, ktorého transparentnosť sa musí zmeniť. Môže mať nula až tri parametre:

element.fadeIn ();
element.fadeIn (trvanie);
element.fadeIn (trvanie, spätné volanie);
element.fadeIn (trvanie, uvoľnenie, spätné volanie);
element.fadeIn (config);

Trvanie argumentu definuje čas, počas ktorého sa animácia vykoná. To môže byť číslo udávajúce počet milisekúnd, alebo jeden z kľúčových slov:

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

& lt; script & gt; (adsbygoogle = window.adsbygoogle || []) stlačte ({});
  • 'rýchlym'(200 ms);
  • "pomalý"(600 ms);

Ak doba nie je nastavený, bude predvolená hodnota je 400 milisekúnd.

bodpre spätné volaniauvádza,funkciu, ktorá sa zavolá ihneď po dokončení animácie. Žiadna funkcia spätného volania parametrov neakceptuje. Táto premenná v ňom sa vzťahuje na uzol premennej DOM.

argumentzmiernenieprevádzkuje dočasné predstavuje animáciu, teda jeho rýchlosť v závislosti na čase. Môže urýchliť začiatok a spomaliť koniec animácie alebo ju urobiť jednotným. Hodnota argumentu je reťazec, ktorý obsahuje kľúčové slovo, túto funkciu"swing"štandardne používa.

V nasledujúcom príklade jQuery fadeIn () sa rovnomerne zvyšuje transparentnosť .block prvok s triedou po dobu jednej sekundy a potom zobrazí správu v konzole:

, $ (. 'Blok'). fadeIn (1000 lineárne, funkcia () {
console.log ('Animácia je kompletná');
});

V prípade, tieto parametre dostatočne, môže byť odoslaný objektukonfiguračného , ktoré môžu obsahovať až 11 rôznych nastavení.

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

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

Funkcia spätného volania

parametra spätné volanie, prešiel jQuery fadeIn (), - veľmi užitočná možností, ako zmeniť vlastnosti vyrobenej asynchrónne bez ovplyvnenia celkového toku kódu.

pre spätné volanie const = funkcia () {
console.log ("Animácie úplná,);
};
$ ("prvok") fadeIn (1000);
spätné volanie ();
​​

V tomto príklade je funkcia začína bezprostredne po animácii bez čakania plnú vzhľad položky.

To všetko fungovalo ako má, musí byť tento argument použitýspätné volania , čo vám umožní zachytiť koniecanimácie:

const callback = funkcia () {
console.log ('Animácia je dokončená');
};
$ ('.element') FadeIn (1000 spätných volaní);

Teraz sa správa v konzole zobrazí iba vtedy, keď sa daná položka stane plne viditeľnou.

Úplná transparentnosť a skrytie prvku

Ako viete, vlastnosť opacitynulovej hodnoty neodstraňuje prvok zo stránky, ale len ho robí neviditeľným. Takéto správanie nie je vhodné, ak chceme skryť blok.

Preto metódy vyblednutia v knižnici jQuery: fadeIn (), fadeTo () a fadeOut () pracujú s priehľadnosťou v kombinácii s ukazovateľom vlastností. Úplne transparentný prvok sa skrýva pomocou zobrazenia pravidla : žiadnea pred týmto pravidlom sa toto pravidlo zruší.

Súvisiace publikácie