Метод slideUp

Метод slideUp предназначен для плавного скрытия элементов, создавая эффект «съезжающей вверх» панели. Он является одним из инструментов библиотеки Cash для работы с анимациями, аналогично методам jQuery, но с меньшим весом и более оптимизированным подходом.

Синтаксис

$(selector).slideUp([duration], [callback]);
  • selector — CSS-селектор или DOM-элемент, к которому применяется анимация.
  • duration (необязательный) — продолжительность анимации в миллисекундах. По умолчанию используется значение 400.
  • callback (необязательный) — функция, вызываемая после завершения анимации.

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

Метод постепенно уменьшает высоту элемента до нуля и одновременно меняет его padding и margin, чтобы скрытие выглядело плавным. После завершения анимации элемент получает CSS-свойство display: none, что делает его полностью невидимым и исключает из потока документа.

Эта анимация использует внутренние функции requestAnimationFrame, что обеспечивает высокую производительность и плавность на всех современных браузерах.

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

$('.menu').slideUp();

В этом примере все элементы с классом menu плавно скроются за стандартный промежуток времени в 400ms.

Для кастомной длительности:

$('.menu').slideUp(1000); // анимация займёт 1 секунду

Добавление callback-функции:

$('.menu').slideUp(600, function() {
    console.log('Элемент скрыт');
});

Важные особенности

  1. Множественные элементы: Если селектор возвращает несколько элементов, метод применяет анимацию к каждому из них по отдельности, сохраняя правильный порядок вызова callback-функций.

  2. Состояние элемента: Если элемент уже скрыт (display: none), повторный вызов slideUp не вызовет ошибок и не будет анимации.

  3. Влияние на layout: Метод изменяет height, padding-top, padding-bottom, margin-top и margin-bottom. Все другие CSS-свойства остаются неизменными.

  4. Взаимодействие с slideDown и slideToggle:

    • slideDown — обратная анимация, раскрывающая элемент.
    • slideToggle — автоматическое переключение между slideUp и slideDown в зависимости от текущего состояния элемента.

Анимация с использованием цепочек

Cash поддерживает цепочки вызовов, что позволяет комбинировать анимации и изменения стилей:

$('.menu')
    .slideUp(500)
    .css('background-color', 'red')
    .fadeIn(300);

В этом примере сначала элемент плавно скрывается, затем изменяется фон, и после этого применяется эффект появления. Все операции выполняются последовательно.

Практические рекомендации

  • Для улучшения производительности рекомендуется избегать вызова slideUp на большом количестве элементов одновременно.
  • Можно комбинировать с CSS-переходами для более сложных визуальных эффектов, но необходимо учитывать, что slideUp напрямую изменяет инлайн-стили height, padding и margin.
  • Для динамически создаваемых элементов важно применять метод после добавления в DOM, иначе анимация не сработает.

Пример с динамическим контентом

const newItem = $('<div class="menu-item">Новый элемент</div>');
$('#menu').append(newItem);
newItem.slideUp(700, () => {
    console.log('Динамический элемент скрыт');
});

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

Настройка продолжительности

duration может быть задан как число в миллисекундах или как строка с ключевым словом:

$('.menu').slideUp('fast');   // 200ms
$('.menu').slideUp('slow');   // 600ms

Если передан некорректный тип, Cash использует стандартное значение 400ms.

Особенности использования с display: inline

Элементы с display: inline не поддерживают изменение высоты, поэтому перед применением slideUp рекомендуется установить display: block или display: inline-block:

$('.inline-element').css('display', 'inline-block').slideUp(500);

Метод slideUp предоставляет простое и эффективное решение для создания анимаций скрытия элементов с плавным визуальным эффектом. Правильное использование duration, callback и комбинирование с другими методами Cash позволяет строить сложные интерфейсы без дополнительных библиотек.

Оглавление