在JavaScript的流行框架JQuery之中，有一个滑动类型的效果，这个效果是经常用到的，比如在360浏览器或者火狐浏览器之中，关于换肤或者天气的更改地址时候都需要用到这个滑动效果。
在这里有三种情况，第一种是点击后显示出来一个页面，但是缩不回去，第二个是可以缩回去，但是点击不能打开，我们用的经常都是第三种，就是点击按钮的时候可以打开，不需要的时候点击又可以缩回去。
第一种情况slideDown：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#open").click(function(){
$("#page").slideDown(2000);
});
});
</script>
<style type="text/css">
#page,#open
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px green;
}
#page
{
height:100px;
display:none;
line-height:100px;
opacity:0.7;
}
</style>
</head>
<body>
<div id="open">点我打开</div>
<div id="page">欢迎打开页面</div>
</body>
</html>
第二种情况slideUp:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#open").click(function(){
$("#page").slideUp("2000");
});
});
</script>
<style type="text/css">
#page,#open
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px green;
}
#page
{
height:100px;
line-height:100px;
opacity:0.7;
}
</style>
</head>
<body>
<div id="open">点我收回页面</div>
<div id="page">如果你点击了我就要回去了!</div>
</body>
</html>
第三种情况slideToggle:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#open").click(function(){
$("#page").slideToggle("2000");
});
});
</script>
<style type="text/css">
#page,#open
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px green;
}
#page
{
height:100px;
line-height:100px;
display:none;
}
</style>
</head>
<body>
<div id="open">点击，显示/隐藏</div>
<div id="page">Hello world!</div>
</body>
</html>