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

Библиотека Cash представляет собой облегчённый аналог jQuery, позволяющий работать с DOM-элементами через простой и лаконичный API. Управление видимостью элементов является одной из ключевых задач при динамическом изменении интерфейса. Cash предоставляет для этого ряд методов, упрощающих работу с элементами без необходимости напрямую манипулировать стилями.

Метод `show()`

Метод show() используется для отображения скрытых элементов. Он автоматически убирает значение display: none, которое может быть установлено как в CSS, так и через JavaScript.

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

const box = $('.box');
box.show();

Если элемент был скрыт через inline-стиль display: none, метод show() восстановит его предыдущее значение display. Важно понимать, что метод не изменяет видимость элементов через visibility, он работает именно с CSS-свойством display.

Метод `hide()`

Метод hide() полностью скрывает элемент, устанавливая для него display: none.

const box = $('.box');
box.hide();

После вызова hide() элемент не будет занимать место на странице, что отличает его от изменения opacity или visibility. Это особенно удобно для динамического управления интерфейсом, когда нужно убрать элемент из потока документа.

Метод `toggle()`

Метод toggle() переключает видимость элемента. Если элемент скрыт (display: none), он будет показан, и наоборот.

const box = $('.box');
box.toggle();

toggle() полезен для реализации кнопок раскрытия/скрытия, аккордеонов, модальных окон и других интерактивных компонентов.

Метод `is()`

Для проверки текущей видимости элемента используется метод is(). Он принимает CSS-селектор или псевдокласс, например :visible и :hidden.

const box = $('.box');

if (box.is(':visible')) {
    console.log('Элемент видим');
} else {
    console.log('Элемент скрыт');
}

Метод позволяет выполнять условные действия, основываясь на текущем состоянии элемента, без необходимости напрямую проверять стили.

Метод `css()`

Хотя show(), hide() и toggle() работают с display, иногда необходимо более гибкое управление видимостью. Метод css() позволяет напрямую изменять любые CSS-свойства, включая visibility и opacity.

const box = $('.box');
box.css('visibility', 'hidden'); // Элемент остаётся на месте, но невидим
box.css('opacity', '0.5');       // Полупрозрачный элемент

Использование css() вместе с методами управления видимостью расширяет возможности кастомного поведения элементов на странице.

Метод `fadeIn()`, `fadeOut()` и `fadeToggle()`

Cash поддерживает плавные анимации при изменении видимости. Методы fadeIn(), fadeOut() и fadeToggle() изменяют прозрачность элемента с анимацией, при этом автоматически управляя display.

Пример:

const box = $('.box');
box.fadeOut(500);  // Элемент исчезнет за 500 мс
box.fadeIn(500);   // Элемент появится за 500 мс
box.fadeToggle(500); // Переключение с анимацией

Эти методы позволяют создавать более плавные и визуально привлекательные интерфейсы, чем простые show() и hide().

Метод `slideUp()`, `slideDown()` и `slideToggle()`

Для управления элементами вертикально можно использовать методы слайдинга. Они изменяют высоту элемента с анимацией, создавая эффект скольжения.

const menu = $('.menu');
menu.slideUp(300);    // Скроет меню с анимацией
menu.slideDown(300);  // Покажет меню с анимацией
menu.slideToggle(300); // Переключение состояния

Эти методы особенно удобны для раскрывающихся списков, аккордеонов и выпадающих меню.

Групповое управление видимостью

Cash позволяет работать сразу с множеством элементов через селекторы. Методы show(), hide(), toggle() и анимационные функции будут применены ко всем выбранным элементам.

$('.item').hide();      // Скрыть все элементы с классом item
$('.item').fadeIn(400); // Показать все элементы с анимацией

Это значительно сокращает количество кода и упрощает управление интерфейсом.

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

Метод show()

Метод hide()

Метод toggle()

Метод is()

Метод css()

Метод fadeIn(), fadeOut() и fadeToggle()

Метод slideUp(), slideDown() и slideToggle()