Методы jQuery show, hide и toggle: появление и скрытие элемента

В этой статье мы рассмотрим, как можно легко показывать и скрывать элементы с помощью методов библиотеки jQuery show, hide и toggle. Мы разберем различные опции методов, позволяющие влиять на анимацию отображения и скрытия. А также вы сможете протестировать работу методов на интерактивных примерах.

Общая схема использования методов

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

$(selector).method(speed, callback);

$(selector).method(speed, callback);

$(selector).method({options});

• selector — селектор элемента, к которому применяется метод;
• method — имя метода (show, hide или toggle);
• speed — длительность анимации в миллисекундах (число в мс, slow, normal или fast);
• easing — функция плавности анимации (linear — с постоянной скоростью, swing — скорость в начале и конце анимации меньше, чем в середине);
• callback — функция, которая будет вызвана после завершения анимации;
• options — объект с параметрами для настройки анимации.

Объект options включает в себя следующие свойства:

• duration — длительность анимации в миллисекундах.
• easing — функция плавности анимации, которая контролирует изменение скорости анимации во времени.
• complete — функция обратного вызова после завершения анимации.
• start — функция обратного вызова перед началом анимации.
• step — функция обратного вызова, которая будет вызвана перед каждым шагом анимации.
• progress — функция обратного вызова, вызываемая после каждого кадра анимации.
• queue — определяет, следует ли добавлять анимацию в очередь анимаций элемента. По умолчанию, если анимация вызывается, пока другая анимация выполняется, она добавляется в очередь. Установка queue: false позволяет выполнить анимацию немедленно, игнорируя очередь.
• specialEasing — позволяет установить специфичную функцию плавности для конкретных свойств CSS.
• always — функция обратного вызова, которая выполняется независимо от результата анимации (после завершения либо преждевременной остановки).
• done — функция обратного вызова, вызываемая после успешного завершения анимации.
• fail — функция обратного вызова, которая вызывается при неудачном завершении анимации.

jQuery show

Метод jQuery show отображает скрытые элементы. Чтобы быстро отобразить скрытый элемент, используется метод show без параметров. Такое поведение будет эквивалентно установке выбранному элементу CSS-свойства display со значением block, если свойство display не восстанавливается в исходное состояние. Иначе значение этого свойства будет таким, каким было первоначально. То есть если элемент имел значение display: 'inline', был скрыт и снова показан, то он также будет отображаться в режиме inline после применения метода show.

Если свойству display элемента задано значение none!important, то метод show не сработает, так как не сможет переписать !important.

Синтаксис метода jQuery show:

$(selector).show(speed, easing, callback);

Примеры:

$('#area').show(); // элемент с ID 'area' будет отображен путем изменения значения его CSS-свойства display на 'block' (или другое подходящее значение на основе его изначального стиля)

$('#area').show('slow'); // отображение происходит с анимацией, создавая плавный эффект раскрытия

$('#area').show('fast', function() {
  alert('Элемент теперь виден!');
}); // элемент будет отображаться быстро, и после завершения анимации будет показано сообщение

Интерактивный пример с методом show будет приведен в следующем разделе вместе с методом hide.

jQuery hide

В противоположность предыдущему методу, метод jQuery hide используется для скрытия определенных элементов. Для мгновенного скрытия элемента метод hide вызывается без параметров, что эквивалентно установке ему CSS-свойства display со значением none. Чтобы сделать это с задействованием анимации, необходимо настроить параметры метода.

Синтаксис метода jQuery hide:

$(selector).hide(speed, easing, callback);

Примеры:

$('#area').hide(); // элемент с ID 'area' будет скрыт мгновенно

$('#area').hide('slow'); // исчезновение элемента будет происходить плавно

$('#area').hide(2000, function() {
  alert('Элемент скрыт!');
}); // анимация скрытия будет длиться 2000 миллисекунд, и после ее завершения появится сообщение

Приведем интерактивный пример с использованием методов show и hide. Создадим счетчик, который при нажатии кнопки будет делать обратный отсчет от 10 до 0. Когда отсчет будет завершен, появится сообщение об этом. Это сообщение затем исчезнет через 3 секунды. Во время отсчета кнопка будет блокироваться.

HTML:

<div class="demoShow" id="demoShow">
    <div class="demoShow__countdown" id="demoShowCountdown">
        <p class="demoShow__timer" id="demoShowTimer">10</p>
        <p class="demoShow__message" id="demoShowMessage" style="display: none;">Время истекло!</p>
    </div>
    <button class="demoShow__start" id="demoShowStart">Начать отсчёт</button>
</div>

CSS:

.demoShow__countdown {
    text-align: center;
    background-color: #303030;
    color: white;
    padding: 20px;
    border-radius: 10px;
}

.demoShow__timer {
    font-size: 48px;
    color: #00c1c5;
    font-weight: bold;
    margin: 0!important;
}

.demoShow__message {
    font-size: 24px;
    margin: 10px 0 0;
    color: #00c1c5;
    font-weight: bold;
}

.demoShow__start {
    background-color: #00c1c5;
    color: white;
    border: none;
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

.demoShow__start:disabled {
    background-color: #ddd;
    color: #393939;
    cursor: not-allowed;
}

JavaScript:

// Получаем объекты элементов таймера, сообщения и кнопки
const timerElement = $('#demoShowTimer');
const messageElement = $('#demoShowMessage');
const startButton = $('#demoShowStart');

// Объект интервала
let interval;

// Функция, вызываемая каждую секунду для уменьшения счетчика
function updateCountdown() {
    // Берем текущее значение таймера и уменьшаем на единицу
    let currentDigit = timerElement.text();
    currentDigit--;

    // Если значение таймера больше нуля, то есть отсчет не завершен, вставляем каждый раз нового значение, уменьшенное на единицу...
    if (currentDigit >= 0) {
        timerElement.text(currentDigit);
    } else { // ...иначе останавливаем работу таймера, показываетм сообщение...
        clearInterval(interval);
        messageElement.show();

        // ... и убираем это сообщение через три секунды, активируя при этом и кнопку
        setTimeout(function() {
            messageElement.hide();
            startButton.prop('disabled', false);
        }, 3000);
    }
}

// Функция запуска счетчика
function startCountdown() {
    // Блокируем кнопку
    startButton.prop('disabled', true);
    // Устанавливаем начальное значение таймера
    timerElement.text(10);
    // Запускаем обратный отсчет
    interval = setInterval(updateCountdown, 1000);
}

// Запускаем счетчик при клике на кнопку
startButton.click(startCountdown);

Результат:

jQuery toggle

Метод jQuery toggle объединяет возможности двух предыдущих методов. Он позволяет скрыть или отобразить элемент, в зависимости от его текущего состояния. При вызове метода toggle элемент будет отображен, если он скрыт, и, наоборот, скроется, если он видимый.

Для мгновенного отображения или скрытия элемента используется метод toggle без параметров. Такое поведение идентично установке элементу CSS-свойства display со значениями block (отображение) и none (скрытие).

Значение block является значением по умолчанию для отображения элемента. То есть, например, для элемента изначально было задано свойство display='none'. При вызове метода toggle элемент получит свойство display='block'. Однако если элементу первоначально было установлено display='flex', затем этот элемент был скрыт с помощью метода hide или toggle, а потом снова был вызван метод toggle, то значение свойства display будет восстановлено в flex. Таким образом, метод toggle запоминает исходное состояние элемента, что позволяет его легко восстанавливать.

Синтаксис метода jQuery toggle:

$(selector).toggle(speed, easing, callback);

Примеры:

$('#area').toggle(); // мгновенное переключение видимости элемента с ID 'area'

$('#area').toggle('slow'); // плавное появление или исчезание элемента

$('#area').toggle(1500, function() {
  alert('Видимость элемента переключена!');
}); // элемент будет скрыт или показан с анимацией, которая будет длиться 1500 миллисекунд, и в конце появится сообщение

В качестве интерактивного примера создадим блок с текстом, который будем прятать либо отображать при нажатии на одну и ту же кнопку.

HTML:

<div class="demoToggle" id="demoToggle">
    <button class="demoToggle__button" id="demoToggleButton">Показать/скрыть</button>
    <article class="demoToggle__text" id="demoToggleText">
        <h3>Заголовок текстового блока</h3>
        <p>Некоторый контент, который может быть показан или скрыт при нажатии на кнопку выше</p>
    </article>
</div>

CSS:

.demoToggle__text {
    background-color: white;
    color: #303030;
    padding: 20px;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, color 0.3s;
}

.demoToggle__button {
    background-color: #00c1c5;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

.demoToggle__button:hover {
    background: #009497;
}

JavaScript:

// При клике на кнопку отображаем либо прячем текстовым блок
$('#demoToggleButton').click(function () {
    $('#demoToggleText').toggle();
});

Результат:

Пример с options

Напоследок рассмотрим пример с объектом options, свойства которого были описаны в первом разделе статьи.

Сверстаем круг, который будем отображать и прятать с плавной анимацией типа swing. Длительность анимации будет 2 секунды (2000 миллисекунд). В середине круга будет отображаться процент, означающий отношение текущего размера круга во время анимации к реальному размеру круга. Для этого будут использоваться возможности свойства step. Также в консоль будем выводить сообщения о начале и завершении анимации.

HTML:

<div class="demoOptions" id="demoOptions">
    <div class="demoOptions__figure-wrapper">
        <div class="demoOptions__figure" id="demoOptionsFigure">
            <div class="demoOptions__percentage" id="demoOptionsPercentage">100%</div>
        </div>
    </div>
    <button class="demoOptions__toggle" id="demoOptionsToggle">Показать/скрыть</button>
</div>

CSS:

.demoOptions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 300px;
}

.demoOptions__figure-wrapper {
    width: 150px;
    height: 150px;
}

.demoOptions__figure {
    width: 150px;
    height: 150px;
    background-color: #00c1c5;
    border-radius: 50%;
    position: relative;
}

.demoOptions__percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #fff;
}

.demoOptions__toggle {
    background-color: #00c1c5;
    color: white;
    border: none;
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

.demoOptions__toggle:hover {
    background: #009497;
}

JavaScript:

// При клике на кнопку вызываем анимацию
$('#demoOptionsToggle').click(function() {
    // Берем объект нашей фигуры
    const circle = $('#demoOptionsFigure');

    // Если фигура видна, прячем ее со скоростью 2 секунды с анимацией swing, выводя в центр круга процент размера относительного реального. В начале и в конце анимации выводим сообщения в консоль
    if (circle.is(':visible')) {
        circle.hide({
            duration: 2000,
            easing: 'swing',
            start: function() {
                console.log('Анимация скрытия началась!');
            },
            step: function(now, fx) {
                const percentage = Math.round(now * 100) + '%';
                $('#demoOptionsPercentage').text(percentage);
            },
            complete: function() {
                console.log('Фигура успешно скрыта!');
            }
        });
    } else { // Если фигура скрыта, показываем ее с теми же настройками анимации, что и при скрытии
        circle.show({
            duration: 2000,
            easing: 'swing',
            start: function() {
                console.log('Анимация появления началась!');
            },
            step: function(now, fx) {
                const percentage = Math.round(now * 100) + '%';
                $('#demoOptionsPercentage').text(percentage);
            },
            complete: function() {
                console.log('Фигура успешно появлена!');
            }
        });
    }
});

Результат:

Заключение

Таким образом, мы разобрали методы jQuery show, hide и toggle, которые предназначены для отображения и скрытия элементов. У этих методов есть общая схема использования с различными вариациями. Методы имеют параметры, позволяющие настраивать анимацию появления и скрытия, а также выполнять код на определенных этапах анимации с помощью callback-функций.