Анимацията на съвременните уеб страници отдавна се е превърнала в нещо очевидно. Разтваряйки елементи, които летят с съобщения, галериите с плъзгащи се изображения подобряват потребителския опит и увеличават показателите на сайта. Популярната JavaScript библиотека jQuery fadeIn () е една от основните анимационни функции. Тя управлява прозрачността на блоковете.

Fade-ефекти

Методът fadeIn () осигурява промяна в прозрачността на прехвърления елемент до стойност от 100%. В библиотеката jQuery тя върви по двойки с функцията fadeOut (), с която можете да анулирате прозрачността и по този начин да "разтворите" елемента. Този ефект може да се постигне с метода fadeTo (), чийто обхват на експозиция е дори по-широк. FadeTo () може да задава всяка стойност на прозрачност в диапазона от 0 до 1.

Синтаксисът на метода

Методът fadeIn () в jQuery се нарича в контекста на елемент, чиято прозрачност трябва да бъде променена. Тя може да приема от нула до три параметъра:

element.fadeIn ();
element.fadeIn (продължителност);
element.fadeIn (продължителност, обратно извикване);
element.fadeIn (продължителност, облекчаване, обратно извикване);
element.fadeIn (config);

Продължителността на аргумента определя времето, през което ще се изпълнява анимацията. Това може да бъде цифра, обозначаваща броя милисекунди или една от ключовите думи:

• „бързо“(200ms);
• „бавно“(600ms);

Ако стойносттане е зададена, тя ще бъде по подразбиране 400 милисекунди.

Обратният код на параметъраозначавафункция, която ще бъде извикана веднага след завършване на анимацията. Функцията за обратно извикване на параметри не се приема. Променливата вътре в нея се отнася до променливата DOM възел.

Аргументът за облекчаванеконтролира функцията за временна анимация, т.е. нейната скорост, в зависимост от времето. Тя може да ускори старта и да забави края на анимацията или да я уеднакви. Стойността на аргумента е низът, съдържащ ключовата дума, по подразбиране, тази функция'swing' .

В следващия пример jQuery fadeIn () ще увеличи равномерно прозрачността на елемента с класа .block в рамките на една секунда и след това ще покаже съобщението в конзолата:

$ ('. Block'). fadeIn (1000 линейни, функция () {
 console.log ('Анимацията е завършена'); 
});

Ако горните параметри не са достатъчни, методът може да предаде конфигурацията на обекта, която може да съдържа до 11 различни настройки.

Функции за обратно извикване

Параметърът за обратно извикване, предаден на метода jQuery fadeIn (), е много полезна опция, тъй като промяната на свойствата се извършва асинхронно, без да се блокира цялостният поток на изпълнение на кода.

const callback = function () {
 console.log ('Анимацията е завършена'); 
};
$ ('. Element') fadeIn (1000);
обратно извикване ();​​

В този пример функцията започва веднага след началото на анимацията, без да изчаква пълния вид на елемента.

За да работи всичко по предназначение, използвайте аргумента за обратно извикване, който ви позволява да достигнете краяанимации:

const callback = function () {
 console.log ('Анимацията е завършена'); 
};
$ ('.element').

Сега съобщението в конзолата ще се показва само когато елементът стане напълно видим.

Пълна прозрачност и прикриване на елемент

Както знаете, непрозрачносттана нулевата стойност не премахва елемент от страницата, а само я прави невидима. Такова поведение не е подходящо, ако искаме да скрием един блок.

Следователно, fade-методите на библиотеката jQuery: fadeIn (), fadeTo () и fadeOut () работят с прозрачност в комбинация с дисплея за свойство. Напълно прозрачен елемент се крие, като се използва правилото : none , и преди това правило това правило се отменя.