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
Syntax metódy
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:
<- 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é volania
uvá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.
argumentzmiernenie
prevá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í.
<- 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 : žiadne
a pred týmto pravidlom sa toto pravidlo zruší.