手风琴特效

1：第一部分就是css，很重要不用说

style type="text/css">
*{padding: 0; margin: 0;}

#main{
width:650px;
margin: 0 auto ;
height:150px;
}
#main ul{
width:650px;
height:150px;
border-left:solid 1px #ddd;
list-style: none;
position: relative;
}
#main ul li{
width:50px;
height:150px;
float: left;
position: relative;
background: #ccc;
cursor: pointer;
overflow: hidden;

}
#main ul li.active{
width:450px;
height: 150px;
}
#main ul li h3{
width:14px;
font-size:14px;
padding: 45px 17px 0;
border: solid 1px #DDDDDD;
height:103px;
}
#main ul li div{
width:400px;
height:150px;
position:absolute;
left:50px;
top:0;
background: pink;
}
#main ul li.last{
position: absolute;
top:0;
right: 0;
}
</style>

2：body里面就是一堆div，不可或缺的。（好的布局会让你的网页写起来更容易。。。此处省略10000+字）

<div id="main">
<ul>
<li class="active">
<h3>白玫瑰</h3>
<div>11111</div>
</li>
<li>
<h3>白玫瑰</h3>
<div>22222</div>
</li>
<li>
<h3>白玫瑰</h3>
<div>33333</div>
</li>
<li>
<h3>白玫瑰</h3>
<div>44444</div>
</li>
<li class="last">
<h3>白玫瑰</h3>
<div>55555</div>
</li>
</ul>
</div> 3@：下面四JS的代码，不过要引用jQuery，版本是2.0以上的，老师说1.0到2.0之间是那些电商网站用的，因为jQuery在这段期间做了各种兼容在里面。
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$("#main ul li").mouseover(function(){
$(this).stop().animate({"width":"450px"}).siblings().stop().animate({"width":"50px"});
})
</script>