Анимация на современных веб-страницах давно стала чем-то само собой разумеющимся. Растворяющиеся элементы, вылетающие сообщения, скользящие галереи изображений улучшают пользовательский опыт и увеличивают показатели сайта. В популярной javascript-библиотеке jQuery fadeIn() - одна из базовых анимационных функций. Она управляет прозрачностью блоков.
Fade-эффекты
Метод fadeIn() обеспечивает изменение прозрачности переданного ему элемента до значения 100%. В библиотеке jQuery он идет в паре с функцией fadeOut(), с помощью которой можно обнулить прозрачность и тем самым "растворить" элемент.
Подобного эффекта можно добиться с помощью метода fadeTo(), диапазон влияния которого еще шире. FadeTo() может установить любое значение прозрачности в диапазоне от 0 до 1.
Синтаксис метода
Метод fadeIn() в jQuery вызывается в контексте элемента, прозрачность которого необходимо изменить. Может принимать от нуля до трех параметров:
element.fadeIn();
element.fadeIn(duration);
element.fadeIn(duration, callback);
element.fadeIn(duration, easing, callback);
element.fadeIn(config);Аргумент duration определяет время, в течение которого будет осуществлена анимация. Это может быть цифра, означающая количество миллисекунд, или одно из ключевых слов:
'fast'(200ms);'slow'(600ms);
Если значение duration не установлено, оно по умолчанию будет равно 400 миллисекунд.
Параметр callback обозначает функцию, которая будет вызвана сразу после завершения анимации. Никаких параметров callback-функция не принимает. Переменная this внутри нее ссылается на изменяемый DOM-узел.
Аргумент easing управляет временной функцией анимации, то есть ее скоростью в зависимости от времени. С его помощью можно ускорить начало и замедлить конец анимации или сделать ее равномерной на всем протяжении. Значением аргумента является строка, содержащая ключевое слово, по умолчанию это функция 'swing'.
В следующем примере jQuery fadeIn() будет равномерно увеличивать прозрачность элемента с классом .block в течение одной секунды, после чего выведет сообщение в консоли:
$('.block').fadeIn(1000, linear, function() {
console.log('Анимация завершена');
});Если перечисленных параметров недостаточно, методу можно передать объект config, который может содержать до 11 различных настроек.
Функции обратного вызова
Параметр callback, передаваемый в метод jQuery fadeIn(), - очень полезная опция, так как изменение свойства осуществляется асинхронно, не блокируя общий поток выполнения кода.
const callback = function() {
console.log('Анимация завершена');
};
$('.element').fadeIn(1000);
callback();В этом примере функция запустится сразу после начала анимации, не дожидаясь полного появления элемента.
Чтобы все сработало как задумано, следует использовать аргумент callback, позволяющий отловить конец анимации:
const callback = function() {
console.log('Анимация завершена');
};
$('.element').fadeIn(1000, callback);Теперь сообщение в консоль будет выведено только тогда, когда элемент станет полностью видим.
Полная прозрачность и скрытие элемента
Как известно, нулевое значение свойства opacity не убирает элемент со страницы, а лишь делает его невидимым. Такое поведение не годится, если мы хотим спрятать какой-то блок.
Поэтому fade-методы библиотеки jQuery: fadeIn(), fadeTo() и fadeOut() работают с прозрачностью в комбинации со свойством display. Полностью прозрачный элемент скрывается с помощью правила display: none, а перед его появлением это правило отменяется.
