Скрытие элементов с сохранением макета в jQuery: кроме .hide()

Быстрый ответ

Для управления свойством видимости элементов не нарушая потока их разположения, предлагается использовать чистый JavaScript следующим образом:

// Скрываем элемент, не нарушая его позицию на странице
element.style.visibility = 'hidden';

Для того, чтобы переключать видимость элемента, меняйте свойство в зависимости от условия, является ли оно 'hidden' или 'visible':

// Элемент мигает, как светофор!
element.style.visibility = element.style.visibility === 'hidden' ? 'visible' : 'hidden';

В дальнейшем мы более подробно разберём, как реализовать данную функциональность с использованием нативных JavaScript-методов, плагинов jQuery и CSS-классов.

Создание плагинов jQuery

Возможно создание пользовательских плагинов для jQuery, которые имитируют работу метода .hide():

// Два в одном: скрытие и отображение
(function($) {
    $.fn.invisible = function() {
        return this.css('visibility', 'hidden');
    };
    $.fn.visible = function() {
        return this.css('visibility', 'visible');
    };
})(jQuery);

Примените созданные методы для управления видимостью:

// Переключаем видимость элемента!
$(".your-element").invisible();  // делаем элемент невидимым
$(".your-element").visible();    // делаем элемент видимым

Вы можете поэкспериментировать с этим на jsFiddle: http://jsfiddle.net/

Прозрачное скрытие c использованием CSS-классов

Создайте CSS-класс .hidden и используйте toggleClass() из jQuery чтобы управлять им:

.hidden {
    visibility: hidden;
}

// Переключение видимости элемента
$(".your-element").toggleClass('hidden');

Добавьте анимацию переходов с помощью jQuery UI:

// Элемент исчезает или появляется в течение 1000 миллисекунд
$(".your-element").toggleClass('hidden', 1000);

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

Отказ от jQuery

С помощью нативного JavaScript эффективно управлять видимостью элементов:

// Простое переключение
const elem = document.querySelector('.your-element');
elem.classList.toggle('hidden');

Современные инструменты JavaScript обеспечивают плавность и контроль над элементами.

Плавность JavaScript: Урок Элегантности

Создавайте интуитивно понятные интерфейсы с помощью классов:

class DomElement {
    constructor(selector) {
        this.elem = document.querySelector(selector);
    }

    hide() {
        // Элемент "прячется"
        this.elem.style.visibility = 'hidden';
        return this;
    }

    show() {
        // Элемент "обнаружен"
        this.elem.style.visibility = 'visible';
        return this;
    }
}

// Игра "в прятки" с методами hide и show
new DomElement('.your-element').hide().show();

Не забывайте, что манипуляции с прототипами — это скользкий путь. Стойте на стороне простоты и элегантности.

Визуализация

Можно представить функцию jQuery .hide() как падающий занавес на сцене, который скрывает актёра от взглядов зрителей:

jQuery('.actor').hide(); // Актёр скрыт за занавесом

В случае с чистым JavaScript актёр просто становится "невидимым":

document.querySelector('.actor').style.visibility = 'hidden'; // Актёр стал невидимым!

Метод имеет следующие отличия:

| Метод                 | Аналогия со сценой
| --------------------- | -------------------
| .hide() (jQuery)      | 🎭 Занавес опускается
| visibility:hidden     | 👤 Невидимость

При этом элемент остаётся на своём месте и становится просто невидимым для пользователя.

Магия эффектов перехода

Все любят красивую анимацию:

// Драматическое затухание с последующим возвратом к исходному состоянию элемента
$('.your-element').fadeOut('slow', function() {
    $(this).css('visibility', 'hidden').show();
});

Создавайте яркие визуальные эффекты с CSS-анимациями, используя чистый JavaScript.

Список ловушек

Избегайте следующих подводных камней:

• Не расширяйте нативные прототипы, в частности HTMLElement. Это плохая практика!
• Избегайте частого использования свойства style в JavaScript — это может снизить производительность.
• Не перегружайте существующие методы jQuery — сохраняйте ваш код легким и понятным!

Осознанное управление видимостью элементов — залог плавной работы графического интерфейса.

Полезные материалы

1. HTMLElement: свойство style – Web API | MDN — руководство по прямому управлению стилями элементов от Mozilla Developer Network.
2. Свойство visibility в CSS — примеры использования свойства visibility от W3Schools.
3. .hide() | Документация API jQuery — подробное описание функции jQuery .hide() в официальной документации.
4. Вам не нужен jQuery! — руководство с альтернативами jQuery от блога Гарстасио.
5. Изменение документа — подробное объяснение работы с DOM в JavaScript от портала learn.javascript.ru
6. Как переключать скрытие и отображение элемента — пошаговая инструкция по переключению видимости от экспертов сайта W3Schools.