jquery效果之隐藏和显示_18-jquery效果之显示与隐藏-优快云博客

本文链接：https://blog.youkuaiyun.com/MixedSignals/article/details/106716680

本文介绍了使用jQuery库实现网页元素的隐藏与显示方法，包括hide(), show()和toggle()函数的基本用法及参数设置，如速度和回调函数的使用，帮助读者掌握动态网页效果制作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

隐藏和显示需要用到hide() 和 show()

<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>

在这里插入图片描述
语法：$(selector).hide(speed,callback); $(selector).show(speed,callback);
speed是可选参数，规定隐藏/显示的速度，可以取"slow"、“fast” 或毫秒
callback是可选参数，是隐藏或显示完成后所执行的函数名称

//点击按钮后会以1000毫秒的速度，以线状方式消失，并在消失完成后弹窗
<script>
$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

toggle()可以用来切换hide()和show()方法

<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
//点击按钮可以让段落隐藏和消失
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>