jquery 显示隐藏-jQuery 效果 - 隐藏和显示

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

jQuery 效果 - 隐藏和显示

接下来jquery 显示隐藏，您将学习如何使用 jQuery 隐藏、显示、切换、滑动、淡入淡出、制作动画等。

单击显示/隐藏面板

由于时间宝贵，我们提供快速、轻松的学习。

在这个网站上，您可以以最方便、易用的方式学习您想要的一切。

例子

jQuery 隐藏()

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

jQuery 隐藏()

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

jQuery 隐藏() 和显示()

使用 jQueryjquery 显示隐藏，可以使用 hide() 和 show() 方法隐藏和显示 HTML 元素：

例子

<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js">
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
如果点击 "Hide" 按钮, 这段文本将消失.
<button id="hide">Hide
<button id="show">Show

运行

语法：

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

可选的速度参数指定隐藏/显示的速率，可以采用以下值：“慢”、“快”或微秒。

可选的回调回调参数是在 hide() 或 show() 方法完成后要执行的函数（您将在前面的章节中了解有关回调函数的更多信息）。

以下示例演示了带有速度参数的 hide() 方法：

例子

<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});
隐藏
这是一段文本
这是另一段文本

运行

jQuery 切换()

您还可以使用toggle() 方法在隐藏和显示元素之间切换。

显示的元素被隐藏，隐藏的元素被显示：

例子

<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
在隐藏和显示段落之间切换
这是一段文本
这是另一段文本

运行

语法：

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

可选参数速度可以采用以下值：“慢”、“快”或微秒。

可选参数回调是在toggle() 完成后执行的函数。

jQuery 效果参考