Animacija na suvremenim web stranicama odavno je postala nešto očigledno. Rješavanjem stavki koje prikazuju poruke, galerije slika klizača poboljšavaju korisničko iskustvo i povećavaju mjerne podatke web-lokacije. Popularna javascript knjižnica jQuery fadeIn () je jedna od osnovnih značajki animacije. Ona upravlja transparentnošću blokova.

Fade-efekti

FadeIn () metoda osigurava promjenu transparentnosti prenesenog elementa na vrijednost od 100%. U jQuery knjižnici, ona ide u paru s funkcijom fadeOut (), s kojom možete poništiti transparentnost i time "rastopiti" element. Taj se učinak može postići metodom fadeTo (), čiji je raspon izloženosti čak i širi. FadeTo () može postaviti bilo koju vrijednost transparentnosti u rasponu od 0 do 1.

Sintaksa metode

FadeIn () metoda u jQuery se naziva u kontekstu elementa čija se transparentnost mora promijeniti. Može uzeti od nule do tri parametra:

element.fadeIn ();
element.fadeIn (trajanje);
element.fadeIn (trajanje, povratni poziv);
element.fadeIn (trajanje, olakšavanje, povratni poziv);
element.fadeIn (config);

Trajanje argumentadefinira vrijeme tijekom kojeg će se animacija izvoditi. To može biti znamenka koja označava broj milisekundi ili jednu od ključnih riječi:

• „brzo“(200 ms);
• "sporo"(600ms);

Ako trajanjevrijednostinije postavljeno, bit će zadano 400 milisekundi.

Povratni poziv parametraoznačavafunkcija koja će biti pozvana odmah nakon završetka animacije. Ne prihvaća se funkcija povratnog poziva parametara. Varijabla koja se nalazi unutar njega odnosi se na varijabli DOM čvor.

Argument za olakšavanjekontrolira funkciju privremene animacije, odnosno njezinu brzinu, ovisno o vremenu. Može ubrzati početak i usporiti završetak animacije ili ga učiniti jednolikim. Vrijednost argumenta je niz koji sadrži ključnu riječ, po defaultu, ovu funkciju'swing' .

U sljedećem primjeru, jQuery fadeIn () će ravnomjerno povećati transparentnost elementa s .block klasom unutar jedne sekunde, a zatim prikazati poruku u konzoli:

$ ('. Block'). fadeIn (1000 linearno, funkcija () {
 console.log ('Animacija je dovršena'); 
});

Ako gornji parametri nisu dovoljni, metoda može prenijeti konfiguraciju objekta, koja može sadržavati do 11 različitih postavki.

Callback funkcije

Callback parametar koji je proslijeđen jQuery fadeIn () metodi je vrlo korisna opcija, budući da se promjena svojstva provodi asinkrono bez blokiranja ukupnog toka izvršenja koda.

const callback = function () {
 console.log ('Animacija je dovršena'); 
};
$ ('. Element') fadeIn (1000);
povratni poziv ();​​

U ovom primjeru, funkcija počinje odmah nakon početka animacije, bez čekanja punog izgleda elementa.

Da bi sve funkcioniralo kako je predviđeno, upotrijebite argument za povratni poziv, koji vam omogućuje da uhvatite krajanimacije:

const callback = function () {
 console.log ('Animacija je dovršena'); 
};
$ ('.element'). FadeIn (1000 povratnih poziva);

Sada će se poruka u konzoli prikazati samo kada stavka postane potpuno vidljiva.

Potpuna transparentnost i prikrivanje elementa

Kao što znate, svojstvo neprozirnostinulte vrijednosti ne uklanja element iz stranice, već ga čini nevidljivim. Takvo ponašanje nije prikladno ako želimo sakriti blok.

Stoga, fade-metode jQuery knjižnice: fadeIn (), fadeTo () i fadeOut () rade s transparentnošću u kombinaciji s prikazom svojstava. Potpuno transparentan element skriva se pomoću prikaza pravila : none , a prije ovog pravila ovo se pravilo poništava.