SOURCE

$("p").hide();
$("p").show();
$("p:first").hide();
$("ul li:first-child").hide();

$("#showBtn").click(function(){
 $("ul li:first-child").show();
});
$("#hideBtn").click(function(){
 $("ul li:first-child").hide();
});
$("#shenqiBtn").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

$("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
$("#donghuaBtn").click(function(){
    $("div").animate({left:'250px'});
  });

<h1>heading </h1>
<p>paragraph</p>
<p>paragraph2</p>
<ul>
  <li>a1</li>
    <li>a2</li>
    <li>a3</li>
  </ul>
<ul>
  <li>b1</li>
    <li>b2</li>
    <li>b3</li>
  </ul>
<button id="showBtn">显示</button>
<button id="hideBtn">隐藏</button><br /><br/>
<button id="shenqiBtn">点击我会很神奇</button>
<div id="div1" style="width:100px;height:100px;background-color:red; "></div><br />
<div id="div2" style="width:100px;height:100px;background-color:yellow; "></div><br />
<div id="div3" style="width:100px;height:100px;background-color:blue; "></div><br />


<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>

<button id="donghuaBtn">开始动画</button>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

p{
  color:red;
}
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:yellow;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;