Использование JQuery методов hide(), show() и toggle()

JQuery. Используем методы hide() и show() для скрытия/показа элементов

Использование JQuery методов hide(), show() и toggle()
Advego - наполнение сайтов информацией
Advego - наполнение сайтов информацией
Advego - наполнение сайтов информацией

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>

Advego - система покупки и продажи контента для сайтов, форумов и блогов
Advego - система покупки и продажи контента для сайтов, форумов и блогов
Advego - система покупки и продажи контента для сайтов, форумов и блогов