jQuery 效果 - 隐藏和显示

隐藏、显示、切换,滑动,淡入淡出,以及动画,哇哦!

点击这里,隐藏/显示面板

Because time is valuable, we deliver quick and easy learning.

At W3Schools, you can study everything you need to learn, in an accessible and handy format.


实例

jQuery hide()
演示一个简单的 jQuery hide() 方法。

jQuery hide()
另一个 hide() 演示。如何隐藏部分文本。


jQuery hide() 和 show()

通过 jQuery,您可以使用 hide()show() 方法来隐藏和显示 HTML 元素:

实例

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});
亲自试一试 »

语法:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称(您将在后面的章节中了解有关回调函数的更多信息)。

下面的例子演示了带有 speed 参数的 hide() 方法:

实例

$("button").click(function(){
  $("p").hide(1000);
});
亲自试一试 »


jQuery toggle()

通过使用 toggle() 方法在隐藏和显示元素之间切换。。

显示被隐藏的元素,并隐藏已显示的元素:

实例

$("button").click(function(){
  $("p").toggle();
});
亲自试一试 »

语法:

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。


jQuery 实验

学习训练

练习题:

使用 jQuery 方法在单击 <p> 元素时隐藏它。


$("p").click(function(){
  $(this).();
});

开始练习


jQuery 效果参考

有关所有 jQuery 效果的完整概述,请访问我们的 jQuery 效果参考