Метод fadeIn

Метод fadeIn предназначен для плавного появления элементов на странице за счёт постепенного увеличения их непрозрачности (opacity). Он является частью набора методов Cash для работы с эффектами отображения, аналогичных jQuery, но с меньшим размером и высокой производительностью.

Синтаксис

$(selector).fadeIn([duration], [callback]);

Параметры:

  • duration (необязательный) — длительность анимации в миллисекундах. Возможны значения:

    • число (например, 400),
    • строка "fast" (≈200 мс) или "slow" (≈600 мс). Если параметр не указан, используется значение по умолчанию 400 мс.

  • callback (необязательный) — функция, которая выполняется после завершения анимации.

Принцип работы

Метод fadeIn:

  1. Проверяет текущее состояние элемента: если элемент скрыт (display: none), устанавливает подходящее значение display (block, inline, inline-block или flex, в зависимости от типа элемента).
  2. Устанавливает начальное значение opacity = 0.
  3. Постепенно увеличивает opacity от 0 до 1 в течение заданной длительности.
  4. После завершения анимации вызывает переданный callback, если он указан.

В отличие от простого изменения стиля через style.display, метод обеспечивает плавный визуальный эффект, создавая ощущение постепенного появления элемента на странице.

Примеры использования

// Появление скрытого блока за 400 мс
$('.box').fadeIn();

// Появление за 1 секунду с последующим выводом сообщения
$('.box').fadeIn(1000, () => {
    console.log('Анимация завершена');
});

// Быстрое появление
$('.box').fadeIn('fast');

Взаимодействие с другими методами Cash

  • Скрытие элемента: перед использованием fadeIn часто применяют hide() или fadeOut(), чтобы элемент был изначально невидим.
  • Цепочки методов: Cash поддерживает chaining, поэтому fadeIn можно комбинировать с другими методами:
$('.box')
    .hide()
    .fadeIn(800)
    .css('border', '2px solid red');

Особенности поведения

  • Если элемент уже видим (opacity = 1), вызов fadeIn не оказывает эффекта, кроме возможного изменения display.
  • Метод корректно работает с несколькими элементами, применяя анимацию к каждому выбранному элементу.
  • В качестве callback можно использовать любую функцию, включая вызов других анимаций:
$('.box').fadeIn(500, function() {
    $(this).fadeOut(500);
});

Внутренние механизмы

Метод fadeIn реализует анимацию через requestAnimationFrame, что обеспечивает:

  • плавность при разных частотах обновления экрана,
  • минимальное потребление ресурсов по сравнению с использованием setInterval,
  • синхронизацию с перерисовкой браузера.

Управление длительностью

Для точного контроля времени анимации используется числовой параметр в миллисекундах. Пример постепенного увеличения прозрачности вручную:

let el = $('.box')[0];
let opacity = 0;
let duration = 1000; // 1 секунда
let interval = 16;   // ≈60fps
let increment = interval / duration;

el.style.display = 'block';
el.style.opacity = opacity;

function step() {
    opacity += increment;
    if (opacity >= 1) {
        el.style.opacity = 1;
    } else {
        el.style.opacity = opacity;
        requestAnimationFrame(step);
    }
}

requestAnimationFrame(step);

Этот пример отражает, как работает метод fadeIn под капотом, постепенно увеличивая opacity до 1 за заданное время.

Совместимость с CSS

Метод fadeIn не влияет на другие CSS-свойства, кроме opacity и display. Это позволяет сочетать анимацию с любыми стилями, включая transform, position, width и height.

$('.box')
    .css({ transform: 'translateY(50px)' })
    .fadeIn(600);

Рекомендации по использованию

  • Для скрытых элементов рекомендуется предварительно использовать hide() или display: none в CSS.
  • При анимации нескольких элементов с разными задержками можно комбинировать fadeIn с delay():
$('.box').each((i, el) => {
    $(el).delay(i * 200).fadeIn(400);
});
  • Для оптимизации производительности больших списков лучше использовать делегирование событий и минимизировать количество одновременных анимаций.

Метод fadeIn в Cash является мощным инструментом для создания плавных визуальных эффектов, позволяя управлять временем появления элементов и обеспечивая высокую производительность благодаря использованию requestAnimationFrame.

Оглавление