8.1 顯示與隱藏動畫效果
顯示元素：
document.getElementById("content").style.display="block"信姓；
隱藏元素：
document.getElementById("content").style.display="none"仇冯；
8.1.1 show（）方法與hide（）方法
show()方法用于顯示頁面中的元素，hide()方法則隱藏頁面中的元素
show()方法會動態(tài)改變當前元素的高度、寬度和不透明度豫领，最終顯示當前元素栓撞，此時元素的css屬性display恢復為除none之外的初始值。show()方法的語法結構：
jQuery對象.show(duration,[fn])赊豌；
8.1.2 toggle（）方法
語法：jQuery對象.toggle(duration,[fn])扛或；
<head>
<script src="jquery-1.11.0.min.js"></script>
<style type="text/css">
div#menu{
margin:30px；
width:100px碘饼；
}
ul{
list-style:none熙兔；
}
ul li{
height:30px；
line-height:40px艾恼；
text-align:center住涉；
border:1px solid #93D6C5；
border-bottom:none钠绍；
}
ul li a{
text-decoration:none舆声；
}
ul li.title{
background-color:#F90
}
ul li.lastItem{
background-image:url(up.jpg)；
background-position:center top柳爽；
backgroun-repeat:no-repeat媳握；
cursor:pointer；
border:none磷脯；
border-top:1px solid #93D6C5
}
ul li.down{
background-image:url(down.jpg)蛾找；
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li class="title">商品服務分類</li>
<li><a href="#">鞋包配飾</a></li>
<li><a href="#">運動戶外</a></li>
<li><a href="#">珠寶手表</a></li>
<li><a href="#">手機數碼</a></li>
<li><a href="#">家電辦公</a></li>
<li><a href="#">護膚彩妝</a></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$("#menu li.lastItem").click(function(){
//切換菜單
$("#menu li:gt(3):not(:last)").toggle();
//更換底部箭頭方向
$(this).toggleClass("down")；
})争拐；
})腋粥；
</script>
</body>
