|
|
Синтаксис и описание:
Добавлено в jQuery 1.0.fadeTo( duration, opacity [, complete ] )Добавлено в jQuery 1.4.3.fadeTo( duration, opacity [, easing ] [, complete ] )Команда .fadeTo() плавно меняет непрозрачность элементов набора jQuery от текущего значения до заданного числа opacity (от 0 до 1). В отличие от .fadeIn() и .fadeOut(), свойство display метод не трогает вовсе — он управляет только прозрачностью.
Параметры:
duration – (число | строка) Обязательный параметр — в отличие от .fadeIn()/.fadeOut(), у .fadeTo() нет значения по умолчанию. Число миллисекунд либо "fast"/"slow". opacity – (число) Обязательный параметр — целевая непрозрачность, число от 0 до 1. easing – (строка, с jQuery 1.4.3) swing (по умолчанию) или linear. complete – (функция) Вызывается по одному разу на каждый элемент после завершения перехода.
Примечание: Если передать duration равным 0, изменение непрозрачности произойдёт мгновенно — фактически это то же самое, что .css('opacity', opacity), но с оформлением через анимационный API (постановка в очередь, callback). Примечание: Так как .fadeTo() не меняет display, вызвать его на элементе с display: none, ожидая, что он «появится», не получится — элемент останется вне потока документа, даже если непрозрачность станет равна 1. Чтобы показать скрытый элемент с плавным проявлением, нужен именно .fadeIn(), либо сначала .show()/.css('display', ...), а затем .fadeTo(). В jQuery 3.x и 4.0: Метод не деприкейчен и не менялся. Как и другие эффекты, в slim-сборке недоступен (с 3.0), а с 4.0 в slim дополнительно нет deferred/queue — нужна полная сборка jQuery.
Примеры:
Плавно сделать элемент полупрозрачным и обратно.
$('#overlay').fadeTo(300, 0.5);
// позже вернуть обратно:
$('#overlay').fadeTo(300, 1);
Мгновенная установка через duration: 0 — аналог .css('opacity', ...) с колбэком.
$('#overlay').fadeTo(0, 0.3, function() {
console.log('Непрозрачность выставлена сразу, без анимации');
});
Частая ошибка: .fadeTo() не показывает элемент с display:none — нужно сначала .show().
// Неправильно: элемент останется скрытым (display: none), даже с opacity: 1
$('#hint').fadeTo(300, 1);
// Правильно:
$('#hint').show().css('opacity', 0).fadeTo(300, 1);
[ наверх ]
|
|
