JQuery методы show() и hide()
Вы можете отображать и скрывать HTML элементы, используя методы show() и hide().
Метод hide() устанавливает стиль "display: none" для выбранных элементов. И наоборот, метод show() восстанавливает свойства отображения совпадающего набора элементов в том виде, в каком они были изначально — block, inline или inline-block — до того как был применен "display: none". Например:
<script>
$(document).ready(function(){
$(".hide-btn").click(function(){
$("p").hide();
});
$(".show-btn").click(function(){
$("p").show();
});
});
</script>
При желании вы можете указать параметр продолжительности (также называемый скоростью), чтобы эффект от методов jQuery show и hide анимировался в течение определенного периода времени.
Продолжительность может быть указана либо с помощью одной из предопределенных строк «slow» или «fast», либо в миллисекундах для большей точности; более высокие значения указывают на более медленную анимацию. «fast» — 200 миллисекунд, а «slow» — 600 миллисекунд.
<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>
Вы также можете указать 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>
Метод toggle()
toggle() показывает или скрывает элемент, т.е. если элемент изначально отображается, он будет скрыт; если он скрыт, он будет отображаться (переключает видимость).
<script>
$(document).ready(function(){
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>
Точно так же вы можете указать параметр продолжительности для метода toggle(), чтобы он анимировался, как методы show() и hide() и callback функцию.
<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>