|
|
Синтаксис и описание:
Добавлено в jQuery 1.0.fadeIn( [ duration ] [, complete ] )Добавлено в jQuery 1.0.fadeIn( options )Добавлено в jQuery 1.4.3.fadeIn( duration [, easing ] [, complete ] )Команда .fadeIn() делает невидимые элементы набора jQuery видимыми, плавно увеличивая непрозрачность (opacity) от 0 до значения, заданного в CSS (обычно 1). Если элемент имел display: none, в начале анимации jQuery устанавливает исходное значение display (см. .hide()) и только затем анимирует прозрачность.
Параметры:
duration – (число | строка) Продолжительность в миллисекундах либо "fast" (200 мс) / "slow" (600 мс). По умолчанию — 400 мс. easing – (строка, с jQuery 1.4.3) swing (по умолчанию) или linear; другие функции перехода добавляются плагинами (например, jQuery UI). complete – (функция) Вызывается по одному разу на каждый элемент после завершения эффекта. options – (объект) Хэш параметров эффекта: duration, easing, queue, complete, step, progress, specialEasing и др.
Примечание: По умолчанию (queue: true) эффект встаёт в стандартную очередь fx элемента и ждёт своей очереди, если на элементе уже выполняется другая анимация — например, в цепочке .fadeOut().delay(300).fadeIn() каждый следующий эффект стартует после завершения предыдущего. Примечание: Простая CSS-замена для плавного появления уже присутствующего в потоке элемента — переход по opacity: transition: opacity .3s; и переключение класса. Но CSS-переход не умеет сам «включать» элемент со display: none — сначала нужно сделать элемент видимым по layout (например, сменить display), и только отдельным тактом браузера включать прозрачность, иначе перехода браузер не увидит. Из-за этого нюанса для сценария «показать скрытый блок» на практике обычно проще оставить .fadeIn(), чем переписывать его вручную на transition — сравнение подходов jQuery и чистого CSS/JS — в статье jQuery или чистый JavaScript. В jQuery 3.x и 4.0: Метод не деприкейчен и не менялся. В slim-сборке эффектов нет вовсе (действует с jQuery 3.0), а с 4.0 в slim-сборке дополнительно отсутствуют модули deferred и queue — .fadeIn() в slim-сборке 4.0 недоступен ни в каком виде, нужна полная сборка jQuery.
Примеры:
Базовое проявление скрытого блока.
$('#notice').fadeIn(); // за 400 мс, если #notice был display: none
Цепочка эффектов через встроенную очередь: сначала скрыть, подождать, затем проявить.
$('#tooltip').fadeOut(200).delay(300).fadeIn(200, function() {
console.log('Подсказка снова видна');
});
CSS-переход как альтернатива для уже присутствующего в потоке элемента (без display: none).
/* .modal-backdrop { opacity: 0; transition: opacity .3s; }
.modal-backdrop.is-visible { opacity: 1; } */
$('.modal-backdrop').addClass('is-visible'); // плавно проявится через CSS, без jQuery.fadeIn
[ наверх ]
|
|
