Funkcija JQuery fadeIn (): spremeni preglednost elementa

Animacija na sodobnih spletnih straneh je že dolgo postala nekaj samoumevnega. Odpravljanje elementov, ki prikazujejo sporočila, galerije slik drsnika izboljšujejo uporabniško izkušnjo in povečujejo meritve spletnega mesta. Priljubljena knjižnica javascript jQuery fadeIn () je ena od osnovnih funkcij animacije. Upravlja preglednost blokov.

Fade-efekti

Metoda fadeIn () zagotavlja spremembo preglednosti prenesenega elementa na vrednost 100%. V knjižnici jQuery gre v parih s funkcijo fadeOut (), s katero lahko izničite preglednost in s tem "raztopite" element. Ta učinek je mogoče doseči z metodo fadeTo (), katere obseg izpostavljenosti je celo širši. FadeTo () lahko nastavi vrednost transparentnosti v razponu od 0 do 1.

Sintaksa metode

Metoda fadeIn () v jQuery se imenuje v kontekstu elementa, katerega preglednost je treba spremeniti. Lahko vzame od nič do treh parametrov:

element.fadeIn ();
element.fadeIn (trajanje);
element.fadeIn (trajanje, povratni klic);
element.fadeIn (trajanje, sproščanje, povratni klic);
element.fadeIn (config);

Trajanje argumenta določa čas, v katerem bo animacija izvedena. To je lahko številka, ki označuje število milisekund ali eno od ključnih besed:

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

& lt; skript & gt; (adsbygoogle = window.adsbygoogle || []). push ({});
  • „hitro“(200ms);
  • „počasen“(600ms);

Če vrednosttrajanjani nastavljena, je privzeta vrednost 400 milisekund.

Povratni klic parametraoznačujefunkcijo, ki bo klicana takoj po zaključku animacije. Funkcija povratnega klica parametrov ne sprejema. Ta spremenljivka se nanaša na spremenljivo vozlišče DOM.

Argument za sprostitevnadzoruje začasno funkcijo animacije, to je njeno hitrost, odvisno od časa. Lahko pospeši začetek in upočasni konec animacije ali pa jo poenoti. Vrednost argumenta je niz, ki privzeto vsebuje ključno besedo, ta funkcija'swing' .

V naslednjem primeru bo jQuery fadeIn () enakomerno povečal preglednost elementa z razredom .block v eni sekundi in nato prikazal sporočilo v konzoli:

$ ('. Block'). fadeIn (1000 linearno, funkcija () {
console.log ('Animacija je končana');
});

Če zgornji parametri ne zadostujejo, lahko metoda prenese konfiguracijo objekta, ki lahko vsebuje do 11 različnih nastavitev.

& lt; skript async = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
& lt ;! - fb_336x280_2 - & gt;

& lt; skript & gt; (adsbygoogle = window.adsbygoogle || []). push ({});

Funkcije povratnega klica

Parameter povratnega klica, posredovan metodi jQuery fadeIn (), je zelo uporabna možnost, saj se sprememba lastnosti izvede asinhrono, ne da bi blokirali celoten potek izvajanja kode.

const callback = function () {
console.log ('Animacija je končana');
};
$ ('. Element') fadeIn (1000);
povratni klic ();
​​

V tem primeru se funkcija začne takoj po začetku animacije, brez čakanja na popoln videz elementa.

Da bi vse delovalo, kot je predvideno, uporabite argument za povratni klic, ki vam omogoča, da dosežete ciljanimacije:

const callback = function () {
console.log ('Animacija je končana');
};
$ ('.element').

Zdaj se bo sporočilo v konzoli prikazalo samo, ko bo element popolnoma viden.

Popolna preglednost in prikrivanje elementa

Kot veste, lastnost motnostiničelne vrednosti ne odstrani elementa s strani, temveč le, da je nevidna. Takšno ravnanje ni primerno, če želimo skriti blok.

Zato fade-metode knjižnice jQuery: fadeIn (), fadeTo () in fadeOut () delujejo s preglednostjo v kombinaciji s prikazom lastnosti. Popolnoma transparenten element se skriva s prikazom pravila : none , pred tem pravilom pa se to pravilo prekliče.

Sorodne publikacije