flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180

Руководство по методам show() и hide() в jQuery

Вы можете отображать и скрывать HTML-элементы, используя jQuery-методы show() и hide().

Метод hide() просто устанавливает встроенный стиль display: none для выбранных элементов. И наоборот, метод show() восстанавливает свойства элементов до того значения, которое у них было изначально, как правило это block, inline, или inline-block. Вот пример.

<script>
$(document).ready(function(){
    // Скрываем отображаемые абзацы
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Показываем скрытые абзацы при клике на кнопку
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>

При желании вы можете указать параметр длительности (duration), чтобы сделать эффект скрытия jQuery анимированным в течение определенного периода времени.

Длительности могут быть указаны либо с использованием одной из предопределенных строк — slow или fast , либо в количестве миллисекунд, для большей точности; чем больше указанное значения, тем медленнее анимация. Примеры:

<script>
$(document).ready(function(){
    // Скрываем отображаемые абзацы с разными скоростями
    $(".hide-btn").click(function(){
        $("p.normal").hide();
        $("p.fast").hide("fast");
        $("p.slow").hide("slow");
        $("p.very-fast").hide(50);
        $("p.very-slow").hide(2000);
    });
    
    // Показываем скрытые абзацы с разными скоростями
    $(".show-btn").click(function(){
        $("p.normal").show();
        $("p.fast").show("fast");
        $("p.slow").show("slow");
        $("p.very-fast").show(50);
        $("p.very-slow").show(2000);
    });
});
</script>

Строка скорости 'fast' указывает длительности 200 миллисекунд, а строка 'slow' указывает длительности 600 миллисекунд.

Вы также можете указать callback-функцию, которая будет выполняться после завершения методов show() или hide(). Мы узнаем больше о функции обратного вызова в следующих главах.

<script>
$(document).ready(function(){
    // Отображаем предупреждающее сообщение после скрытия абзацев
    $(".hide-btn").click(function(){
        $("p").hide("slow", function(){
            // Код, который должен быть выполнен
            alert("The hide effect is completed.");
        });
    });
    
    // Отображаем предупреждающее сообщение после отображения абзацев
    $(".show-btn").click(function(){
        $("p").show("slow", function(){
            // Код, который должен быть выполнен
            alert("The show effect is completed.");
        });
    });
});
</script>

jQuery-метод toggle()

jQuery-Метод toggle() отображает или скрывает элементы таким образом, что если элемент изначально отображается, он будет скрыт; если он скрыт, он будет отображаться (т. е. переключает видимость visibility).

<script>
$(document).ready(function(){
    // Переключаем отображение абзацев
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>

Аналогично, вы можете указать параметр duration для метода toggle(), чтобы сделать его анимированным, как методыshow() и hide().

<script>
$(document).ready(function(){
    // Переключаем параграфы с разными скоростями
    $(".toggle-btn").click(function(){
        $("p.normal").toggle();
        $("p.fast").toggle("fast");
        $("p.slow").toggle("slow");
        $("p.very-fast").toggle(50);
        $("p.very-slow").toggle(2000);
    });
});
</script>

Точно так же вы можете также указать callback-функцию обратного вызова для метода toggle().

<script>
$(document).ready(function(){
    // Отображаем предупреждающее сообщение после переключения абзацев
    $(".toggle-btn").click(function(){
        $("p").toggle(1000, function(){
            // Код, который должен быть выполнен
            alert("The toggle effect is completed.");
        });
    });
});
</script>
jivo banner 480x320jivo banner 728x90jivo banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 3.5 / 5. Количество оценок: 2

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…
Подробнее

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…
Подробнее

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…
Подробнее