1.如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/jquery-1.9.0.min.js" ></script>
<script>
var i=false;
$(document).ready(function(){
$("#p1").addClass("div1");
$("button").click(function(){
if(!i)
{
i=true;
}
else
{
i=false;
}
if(!i)
{
$("#p1").show(1000);//设置显示过程的时间
}
else
{
$("#p1").hide(1000);//设置隐藏过程中的时间
}
});
})
</script>
<style>
.div1
{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<title>jqueryhideshow</title>
</head>
<body>
<div id="p1">
</div>
<button>这是一个按钮</button>
</body>
</html>
2.如下所示，用toggle事件代替show与hide
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>showhide切换</title>
<script type="text/javascript" src="../js/jquery-1.9.0.min.js" ></script>
<script>
$(document).ready(function(){
$("#p1").addClass("div1");
$("button").click(function(){
$("#p1").toggle(1000);//toggle键根据按键的单双次数在show（）和hide（）之间切换
});
})
</script>
<style>
.div1
{
width: 200px;
height: 200px;
background-color:red;
}
</style>
</head>
<body>
<button>这是一个按钮</button>
<div id="p1"></div>
</body>
</html>