Модуль fx_methods

Модуль fx_methods в Zepto.js отвечает за работу с анимациями и визуальными эффектами элементов DOM. Он предоставляет удобный интерфейс для управления изменением стилей и плавных переходов, сохраняя при этом минимальный вес библиотеки. Основная цель модуля — упрощение работы с анимациями, аналогично методам jQuery, но с использованием CSS-переходов там, где это возможно, для повышения производительности.

Основные методы

show(duration, callback)

Метод делает элемент видимым. Если указать duration, элемент будет появляться с анимацией. Сигнатура:

$(selector).show(duration, callback)
  • duration — время анимации в миллисекундах или строка 'fast' / 'slow'.
  • callback — функция, вызываемая после завершения анимации.

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

$('#box').show(400, function() {
    console.log('Элемент показан');
});

При отсутствии duration элемент становится видимым мгновенно.

hide(duration, callback)

Метод скрывает элемент. Параметры идентичны методу show. Внутренне используется CSS-свойство display и opacity для плавного эффекта исчезновения.

$('#box').hide(200);

toggle(duration, callback)

Комбинированный метод для переключения видимости элемента. Если элемент видим — вызывается hide, если скрыт — show. Особенность: метод корректно работает даже при одновременных вызовах для нескольких элементов.

$('#box').toggle(300);

fadeIn(duration, callback)

Позволяет плавно увеличивать прозрачность элемента от 0 до 1. Поддерживается за счет CSS-свойства opacity. Примечание: элемент автоматически становится видимым, если был скрыт через display: none.

$('#box').fadeIn(500);

fadeOut(duration, callback)

Противоположность fadeIn. Плавное уменьшение прозрачности до 0, после чего элемент скрывается с помощью display: none.

$('#box').fadeOut(500);

fadeToggle(duration, callback)

Комбинирует fadeIn и fadeOut в одном методе. Эффект зависит от текущей видимости элемента.

$('#box').fadeToggle(400);

fadeTo(duration, opacity, callback)

Позволяет установить конкретный уровень прозрачности элемента с анимацией. Параметры:

  • duration — время анимации.
  • opacity — конечное значение прозрачности (от 0 до 1).
  • callback — функция, выполняемая после завершения анимации.
$('#box').fadeTo(300, 0.5);

slideDown(duration, callback)

Плавное раскрытие элемента по высоте от 0 до исходной высоты. Внутри метода используется CSS-свойство height с переходом, что обеспечивает производительность.

$('#box').slideDown(400);

slideUp(duration, callback)

Скрытие элемента с анимацией уменьшения высоты до 0. После завершения элемента применяется display: none.

$('#box').slideUp(400);

slideToggle(duration, callback)

Комбинированный метод slideDown/slideUp. Автоматически определяет текущее состояние элемента.

$('#box').slideToggle(300);

Параметры времени анимации

Zepto позволяет использовать строковые сокращения для длительности анимации:

  • 'fast' — 200 мс
  • 'slow' — 600 мс
  • Числовое значение — точное количество миллисекунд.

Если duration не указан, анимация выполняется мгновенно.

Использование callback-функций

Все методы модуля fx_methods поддерживают callback, который вызывается после завершения анимации. Это удобно для последовательного выполнения действий:

$('#box').fadeOut(300, function() {
    $(this).slideDown(400);
});

Внутренняя реализация

Zepto стремится использовать CSS-переходы (transition) для плавных эффектов, что значительно быстрее, чем анимации через JavaScript. Если CSS-переходы недоступны, библиотека автоматически переключается на анимацию через таймеры.

Основные свойства, изменяемые методами модуля fx_methods:

  • opacity — для fade методов.
  • height — для slide методов.
  • display — для переключения видимости (show/hide).

Особенности работы с коллекциями элементов

Методы модуля могут применяться к коллекции элементов одновременно. Анимация выполняется для каждого элемента отдельно, а callback вызывается для каждого. Пример:

$('.item').fadeOut(200, function() {
    console.log('Элемент скрыт:', this);
});

Совместимость и производительность

Использование CSS-переходов обеспечивает:

  • Высокую производительность на мобильных устройствах.
  • Поддержку аппаратного ускорения.
  • Снижение нагрузки на главный поток JavaScript.

Для старых браузеров, не поддерживающих CSS-переходы, Zepto автоматически использует JavaScript-анимации.

Оглавление