jQuery Show 和 Hide 效果
在本教程中，您将学习如何使用 jQuery 显示隐藏 HTML 元素。
jQuery show() 和 hide() 方法
您可以使用 jQuery show() 和 hide() 方法显示和隐藏 HTML 元素。
hide() 方法只是为选定元素设置 内联样式 display: none。 相反，show() 方法将匹配的元素集的 display properties 恢复为它们最初的状态 — 通常是块、内联或内联块——在应用内联样式 display: none 之前。 这是一个例子。
<script>
$(document).ready(function(){
// 隐藏显示的段落
$(".hide-btn").click(function(){
$("p").hide();
});
// 显示隐藏段落
$(".show-btn").click(function(){
$("p").show();
});
});
</script>您可以选择指定持续时间（也称为速度）参数，以使 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 毫秒。
您还可以指定一个 回调函数 在 show() 或 hide() 方法完成后执行。 我们将在接下来的章节中了解有关回调函数的更多信息。
<script>
$(document).ready(function(){
// 隐藏段落后显示警告消息
$(".hide-btn").click(function(){
$("p").hide("slow", function(){
// Code to be executed
alert("The hide effect is completed.");
});
});
// 显示段落后显示警报消息
$(".show-btn").click(function(){
$("p").show("slow", function(){
// Code to be executed
alert("The show effect is completed.");
});
});
});
</script>jQuery toggle() 方法
jQuery toggle() 方法显示或隐藏元素，如果元素最初显示，它将被隐藏； 如果隐藏，它将被显示（即切换可见性）。
<script>
$(document).ready(function(){
// 切换段落显示
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>同样，您可以为 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>同样，您也可以为 toggle() 方法指定一个回调函数。
<script>
$(document).ready(function(){
// 切换段落后显示警报消息
$(".toggle-btn").click(function(){
$("p").toggle(1000, function(){
// 要执行的代码
alert("The toggle effect is completed.");
});
});
});
</script>Advertisements