Метод slideToggle

Метод slideToggle используется для анимационного переключения видимости элементов с эффектом скольжения по вертикали. Он сочетает в себе поведение методов slideUp и slideDown: если элемент скрыт, он плавно раскрывается, если видим — плавно скрывается. Этот метод особенно полезен при создании динамических интерфейсов, где требуется плавная анимация без использования сторонних библиотек типа jQuery.

Синтаксис

$(selector).slideToggle([duration], [easing], [callback])
  • selector — CSS-селектор, выбранные элементы к которым применяется метод.
  • duration (необязательный) — продолжительность анимации в миллисекундах или строковое значение 'fast' (200 мс), 'normal' (400 мс), 'slow' (600 мс).
  • easing (необязательный) — функция плавности анимации. Поддерживаются 'linear' и 'swing'.
  • callback (необязательный) — функция, вызываемая после завершения анимации для каждого элемента.

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

slideToggle работает с внутренними стилями элемента:

  • Изменяет height от текущей высоты до 0 при скрытии.
  • Изменяет height от 0 до полной высоты при показе.
  • Поддерживает плавное изменение padding и margin, если они заданы для вертикального направления.

Библиотека автоматически вычисляет «естественную» высоту элемента (scrollHeight) для корректного раскрытия, что позволяет избежать фиксированных значений высоты в CSS.

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

Базовое переключение видимости:

$('#menu').slideToggle();

Если элемент с ID menu скрыт, он плавно раскроется за 400 мс (значение по умолчанию). Если видим — плавно скроется.

С указанием длительности анимации:

$('.panel').slideToggle(600);

Элементы с классом panel будут скрываться или показываться с анимацией длительностью 600 мс.

Использование функции обратного вызова:

$('#content').slideToggle(400, 'swing', function() {
    console.log('Анимация завершена');
});

После завершения анимации выводится сообщение в консоль. Обратный вызов выполняется для каждого элемента отдельно, если селектор выбирает несколько элементов.

С использованием разных функций плавности:

$('.box').slideToggle('fast', 'linear');

Элемент .box скрывается или раскрывается быстро с равномерной скоростью изменения (linear).

Особенности работы с CSS

  • Если элемент имеет display: none в CSS, метод корректно вычислит его высоту при первом раскрытии.
  • Не рекомендуется использовать slideToggle для элементов с абсолютным позиционированием без явно заданной высоты, так как анимация может выглядеть нестабильно.
  • Методы slideUp и slideDown изменяют стиль overflow на hidden на время анимации, slideToggle ведет себя аналогично.

Цепочка методов и комбинирование

slideToggle возвращает объект Cash, что позволяет объединять несколько методов в цепочку:

$('#box')
    .slideToggle(400)
    .css('background-color', 'lightblue')
    .fadeIn(200);

Сначала выполняется анимация скольжения, затем изменяется цвет фона, а затем применяется плавное появление. Важно учитывать, что анимации выполняются асинхронно: изменения CSS применяются сразу, а анимация продолжается по таймеру.

Применение в динамических интерфейсах

slideToggle часто используется для:

  • Скрытия и раскрытия аккордеонов.
  • Показ/скрытие дополнительных панелей настроек.
  • Плавного переключения контента в модальных окнах.

Сочетание с другими методами Cash (fadeToggle, toggleClass, on) позволяет создавать сложные интерфейсы с минимальным количеством кода:

$('.accordion-header').on('click', function() {
    $(this).next('.accordion-content').slideToggle(300);
    $(this).toggleClass('active');
});

Здесь при клике на заголовок аккордеона соответствующий контент раскрывается или скрывается, а заголовок получает/убирает класс active.

Метод slideToggle в Cash обеспечивает легкую и производительную реализацию вертикальной анимации элементов, сохраняя совместимость с современными браузерами и избегая необходимости включения полной библиотеки jQuery. Его гибкость позволяет управлять длительностью, плавностью и действиями после завершения анимации, что делает его незаменимым инструментом для динамических веб-интерфейсов.

Оглавление