Вы можете отображать и скрывать HTML-элементы с помощью методов jQuery show() и hide().
Метод hide() просто устанавливает онлайн параметр style="display: none" для выбранных элементов. И наоборот, метод show() восстанавливает свойства отображения элементов до того, чем они были изначально - обычно block, inline или inline-block. Например:
<script type="text/javascript"> $(document).ready(function(){ // Скрыть параграфы $(".hide-btn").click(function(){ $("p").hide(); }); // Показать скрытые параграфы $(".show-btn").click(function(){ $("p").show(); }); }); </script>
При желании вы можете указать параметр длительности (также называемый скоростью), чтобы сделать эффект скрытия jQuery анимированным в течение указанного периода времени.
Длительность может быть указана либо с использованием одной из предопределенных строк "slow" или "fast", либо в количестве миллисекунд для большей точности; более высокие значения указывают на более медленную анимацию.
<script type="text/javascript"> $(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>
Вы также можете указать функцию обратного вызова (callback), которая будет выполняться после завершения методов show() или hide(). Мы узнаем больше о функциях типа коллбэк в следующих главах.
<script type="text/javascript"> $(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() отображает или скрывает элементы таким образом, что если элемент отображается изначально, он будет скрыт; если он скрыт, он будет показан (т.е. метод как бы «переключает видимость»).
<script type="text/javascript"> $(document).ready(function(){ // Переключение видимости параграфа $(".toggle-btn").click(function(){ $("p").toggle(); }); }); </script>
Точно так же вы можете указать параметр duration (длительность) для метода toggle(), чтобы сделать его анимированным, как и для методов show() и hide().
<script type="text/javascript"> $(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 type="text/javascript"> $(document).ready(function(){ // Показать сообщение после переключения видимости параграфа $(".toggle-btn").click(function(){ $("p").toggle(1000, function(){ // Код функции коллбэк alert("The toggle effect is completed."); }); }); }); </script>
Оставить комментарий