jQuery 显示与隐藏

最新推荐文章于 2025-08-13 21:05:35 发布

chaoyv

最新推荐文章于 2025-08-13 21:05:35 发布

阅读量113

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 进阶文章标签： xhtml javascript ViewUI

本文链接：https://blog.youkuaiyun.com/chaoyv/article/details/88303029

jQuery 进阶专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用jQuery轻松实现网页元素的显示与隐藏效果，并演示了通过按钮控制元素的显示和隐藏状态，同时展示了不同速度参数的应用。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 显示与隐藏</title>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
</head>
<body>

<input class="show" type="button" value="显示" />
<input class="hide" type="button" value="隐藏" />
<div id="box">

</div>


</body>
</html>

/* CSS Document */

#box{ width:200px; height:160px; background:#0F9;}

$(function(){

/*

$('.show').click(function(){//显示
	$('#box').show();
});
$('.hide').click(function(){//隐藏
	$('#box').hide();
});

$('.show').click(function(){
	$('#box').show(1000);//显示用了 1 秒
});
$('.hide').click(function(){
	$('#box').hide(1000);//隐藏用了 1 秒
});


*/

//除了直接使用毫秒来控制速度外，jQuery 还提供了三种预设速度参数字符串：show、normal和fast，
//分别对应 600 毫秒、400 毫秒和 200 毫秒
$('.show').click(function(){
	$('#box').show('fast');//200毫秒
});
$('.hide').click(function(){
	$('#box').hide('');//默认 400 毫秒
});
	
});

效果图：