Суббота21 июля
Компьютеры

Функция 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
Комментарии
Ваше имя:
Комментарий:
Введите символы: *
captcha
Обновить

Похожие материалы
Рубленные котлеты из куриного филе Еда и напитки
Рубленные котлеты из куриного филе

Рубленные котлеты из куриного филе обязательно станут вашим любимым блюдом. Ведь они стопроцентно внесут приятные коррективы в привычный рацион. Как часто вы вообще готовите котлеты? Наверное, пару раз в месяц уж точн...

Эктропион шейки матки Здоровье
Эктропион шейки матки

Эктропион шейки матки представляет собой приобретенное или же врожденное заболевание, сопровождающееся выворотом слизистой оболочки канала шейки матки. Вообще эктропион принято считать более сложной клинической формой...

Дыхательная система.  Строение, функции бронх и легких, причины болевых ощущений Здоровье
Дыхательная система. Строение, функции бронх и легких, причины болевых ощущений

Бронхи и легкие. Строение Бронхами называют все отходящие от трахеи ветви. В своей совокупности они образуют «бронхиальное дерево». Оно обладает собственной упорядоченной иерархией,...

Модальное окно jQuery - для чего нужно и как установить Интернет
Модальное окно jQuery - для чего нужно и как установить

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

Проблемы с компьютером: как исправить синий Компьютеры
Проблемы с компьютером: как исправить синий "экран смерти" Windows?

Сам по себе синий "экран смерти" означает, что при работе операционной системы возникла непоправимая ошибка, после которой невозможно дальнейшее продолжение работы. Все данные, которые не были сохранены до ее возникно...

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

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

Определение, значение и функции морали Новости и общество
Определение, значение и функции морали

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

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

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

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

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

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

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