SOURCE

$("#in").click(function(){$("#div1").fadeIn();
                             $("#div2").fadeIn("slow");
                            $("#div3").fadeIn(3000);});
$("#out").click(function(){$("#div4").fadeToggle();
                             $("#div5").fadeToggle("slow");
                            $("#div6").fadeToggle(3000);});
$("#flip").click(function(){$("#panel").slideToggle("slow");});
$("#ccc").click(function(){ var div=$("#la");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });

<button id="in">点击淡入 div 元素。</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div><br>
<button id="out">点击淡入或淡出 div 元素。</button>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="flip">魔法小樱</div>
<div id="panel">隐藏着黑暗力量的钥匙啊</div>
<button id="ccc">开始动画</button>
<div id="la" ></div>

#div1{
  width:80px;
  height:80px;
display:none;
  background-color:red;
}
#div2{
  width:80px;
  height:80px;
  display:none;
  background-color:green;
}
#div3{
  width:80px;
  height:80px;
  display:none;
  background-color:blue;
}
#div4{
  width:80px;
  height:80px;
  background-color:blue;
}
#div5{
  width:80px;
  height:80px;
  background-color:red;
}
#div6{
  width:80px;
  height:80px;
  background-color:yellow;
}
#panel,#flip{
padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;  
}
#panel{
  padding:50px;
  display:none;
}
#la{
  background:#98bf21;
  height:100px;
  width:100px;
  position:absolute;
}