<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function()
{
<!--收起-->
$("#btn1").click(function(){
$("#p1").css("color","red").slideUp(2000);
});
<!--展开-->
$("#btn2").click(function(){
$("#p1").css("color","red").slideDown(2000);
});
<!--有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条-->
<!--收起,展开-->
$("#btn3").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1" style="height:100px; background:#99cccc;">jQuery 乐趣十足！</p>
<button id="btn1">点击这里up</button>
<button id="btn2">点击这里down</button>
<button id="btn3">点击这里up down</button>
</body>
</html>
原文：http://www.cnblogs.com/iameke/p/6701230.html