Суббота17 ноября
Компьютеры

Функция jQuery fadeIn(): изменение прозрачности элемента

15 апреля 2018

Анимация на современных веб-страницах давно стала чем-то само собой разумеющимся. Растворяющиеся элементы, вылетающие сообщения, скользящие галереи изображений улучшают пользовательский опыт и увеличивают показатели сайта. В популярной javascript-библиотеке jQuery fadeIn() - одна из базовых анимационных функций. Она управляет прозрачностью блоков.

Fade-эффекты

Метод fadeIn() обеспечивает изменение прозрачности переданного ему элемента до значения 100%. В библиотеке jQuery он идет в паре с функцией fadeOut(), с помощью которой можно обнулить прозрачность и тем самым "растворить" элемент.

Подобного эффекта можно добиться с помощью метода fadeTo(), диапазон влияния которого еще шире. FadeTo() может установить любое значение прозрачности в диапазоне от 0 до 1.

Функция jQuery fadeIn()

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

Метод 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-узел.

Функция jQuery fadeOut()

Аргумент 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, а перед его появлением это правило отменяется.

Источник: fb.ru
Похожие материалы
Основные функции jQuery: примеры, команды и методы Компьютеры
Основные функции jQuery: примеры, команды и методы

Библиотека jQuery позволяет легко управлять страницей HTML после ее отображения браузером. Он также предоставляет инструменты, что помогут вам создать анимацию на вашей странице, и инструменты, которые позволяют вам о...

Питание растений минеральное: основные элементы и функции различных элементов для растений Новости и общество
Питание растений минеральное: основные элементы и функции различных элементов для растений

Любое растение – это настоящий живой организм, и для того, чтобы его развитие шло полноценно, требуются жизненно важные условия: свет, воздух, влага и питание.

Какие химические элементы входят в состав клетки? Роль и функции химических элементов, входящих в состав клетки Образование
Какие химические элементы входят в состав клетки? Роль и функции химических элементов, входящих в состав клетки

Сегодня обнаружено и выделено в чистом виде много химических элементов таблицы Менделеева, а пятая их часть встречается в каждом живом организме. Они, подобно кирпичикам, являются главными составляющими органических и...

Основные элементы культуры. Функции культуры Новости и общество
Основные элементы культуры. Функции культуры

В социологии – науке о человеческом обществе и системах, которые его составляют, закономерностях развития общества – понятие культуры являет собой центральный образующий элемент. Культура с точки зрения со...

Функция rotate в CSS: двумерное вращение элемента Компьютеры
Функция rotate в CSS: двумерное вращение элемента

Функция rotate() в CSS осуществляет над элементом двумерную трансформацию вращения вокруг неподвижного центра. Блок при этом не деформируется и не влияет на положение соседних HTML-контейнеров. Метод позволяет указать...

Метод appendTo в jQuery: вставка элементов Компьютеры
Метод appendTo в jQuery: вставка элементов

Библиотека jQuery содержит множество функций, позволяющих манипулировать DOM-узлами документа: удалять, клонировать, вставлять, перемещать. Функция jQuery appendTo() вызывается для элемента (или набора элементов). Она...

Многофункциональная охранно-мониторинговая система StarLine M32 CAN: основные функции, преимущества Автомобили
Многофункциональная охранно-мониторинговая система StarLine M32 CAN: основные функции, преимущества

Разработчики современных сигнализаций подходят комплексно к вопросам обеспечения безопасности автомобилей. Многие компании стремятся объединять механические средства защиты и охранные системы контроля доступа. В резул...

Радиатор ВАЗ-2106: замена элемента Автомобили
Радиатор ВАЗ-2106: замена элемента

Топливно-воздушная смесь при сгорании выделяет огромное количество тепла. Соответственно, для нормальной работы двигателя нужен хороший теплоотвод. Эту функцию выполняет радиатор охлаждения. ВАЗ-2106 тоже им оснащаетс...

Мобильная комбикормовая установка: функции и преимущества Автомобили
Мобильная комбикормовая установка: функции и преимущества

Мобильная комбикормовая установка представляет собой мини-завод для изготовления корма для свиней и крупнорогатого скота из зерна с добавлением разнообразных обогатительных составов.

Детали автомобиля, элементы кузова и салона. Устройство автомобиля Автомобили
Детали автомобиля, элементы кузова и салона. Устройство автомобиля

Автомобилестроение стремительно развивается: появляются новые технологии, увеличивается скорость и проходимость машин, уменьшается их вред для окружающей среды, растет уровень безопасности, благодаря электронике на во...