Animacja na współczesnych stronach internetowych już dawno stała się czymś oczywistym. Rozpuszczanie elementów, które latają wiadomości, galerie obrazów z suwakiem zwiększają wygodę użytkowników i zwiększają metryki witryny. Popularna biblioteka javascript jQuery fadeIn () jest jedną z podstawowych funkcji animacji. Zarządza przejrzystością bloków.

PRZENIKANIE efekty

Sposób fadeIn () stanowi przejrzystości zmiany transmitowanego niej do 100%. Biblioteka jQuery, jest on powiązany z funkcji fadeOut (), można użyć jasnej przejrzystości, a tym samym „rozpuścić” element. Efekt ten można osiągnąć za pomocą metody fadeTo (), której zakres ekspozycji jest jeszcze szerszy. FadeTo () może ustawić dowolną wartość przezroczystości w zakresie od 0 do 1.

Składnia metody

Sposób fadeIn () w jQuery wywoływana w kontekście pozycji, którą chcesz zmienić przezroczystość. może to trwać od zera do trzech parametrów:

element.fadeIn ();
element.fadeIn (czas trwania);
element.fadeIn (czas trwania, oddzwanianie);
element.fadeIn (czas trwania, złagodzenie, oddzwanianie);
element.fadeIn (config);

argumentCzas trwaniaokreśla czas, w którym animacja będzie. Może to być liczba wskazuje, w milisekundach, albo jeden z parametrów:

• "szybko"(200 ms);
• "wolno"(600 ms);

Jeśli czas trwania wartości nie jest ustawiony, domyślnie ustawiona jest na 400 milisekund.

Wywołanie parametru oznaczafunkcja, która zostanie wywołana natychmiast po zakończeniu animacji. Brak funkcji zwrotnej parametrów nie jest akceptowalny. Zmienna to wewnątrz odnosi się do zmiennej węzeł DOM.

Argumentzłagodzenieprowadzi tymczasowy animację funkcji, czyli jego prędkości w zależności od czasu. Może przyspieszyć start i spowolnić koniec animacji lub uczynić ją jednolitą w całym tekście. Wartością argumentu jest ciąg zawierający słowo kluczowe, domyślnie ta funkcja"swing" .

W poniższym przykładzie jQuery fadeIn () będzie równomiernie zwiększają przejrzystość elementu .block z klasą na sekundę, a następnie wyświetla komunikat w konsoli

$ ('bloku'). fadeIn (1000 liniowa funkcja () {
 console.log ("animacja zakończeniu"), 
}); , 

Jeżeli parametry te mało, mogą być wysyłane przez obiektkonfiguracji , które mogą zawierać do 11 różnych ustawień.

,

Funkcja zwrotna

parametr zwrotna, przepuszczono przez jQuery fadeIn (), - bardzo użyteczne rozwiązaniem, właściwości zmieniają się asynchronicznie, bez wpływu na całkowity przepływ kodu.

const callback = function () {
 console.log ("Animacja zakończona"); 
};
$ ("Element") fadeIn (1000);
callback ();​​

W tym przykładzie funkcja rozpoczyna się natychmiast po zakończeniu animacji bez czekania pełny wygląd elementu.

To wszystko działa zgodnie z przeznaczeniem, argument powinien być używanyzwrotnego , co pozwala złapać koniecanimacje:

const callback = function () {
 console.log ("Animacja zakończona"); 
};
$ (".element"). FadeIn (1000 oddzwaniania);

Teraz wiadomość w konsoli będzie wyświetlana tylko wtedy, gdy przedmiot stanie się w pełni widoczny.

Pełna przejrzystość i ukrywanie elementu

Jak wiadomo, właściwość nieprzezroczystościo zerowej wartości nie usuwa elementu ze strony, ale tylko czyni go niewidocznym. Takie zachowanie nie jest właściwe, jeśli chcemy ukryć blok.

Dlatego metody zanikania biblioteki jQuery: fadeIn (), fadeTo () i fadeOut () działają z przezroczystością w połączeniu z wyświetlaniem właściwości. W pełni przezroczysty element jest ukrywany za pomocą wyświetlania reguły : none , a przed tą regułą ta reguła jest anulowana.