jQuery实现简单的手风琴效果

手风琴

//css代码
<style>
			*{
				margin: 0;
				padding: 0;
			}
			img{
				border: none;
				display: block;
			}
				#acc {
					width: 640px;
					height: 140px;
					
					margin: 0 auto;
				}
				#acc ul  {
					border-left:1px solid #ddd ;
					height: 140px;
					position: relative;
				}
				#acc ul li {
					width:50px;
					height: 138px;
					border: 1px solid #ddd;
					float: left;
					list-style: none;
					border-left: 0;
					position: relative;
					overflow: hidden;
				}
				#acc ul li.active {
					width: 434px;
					
				}
				#acc ul li h3 {
					font-size: 14px;
					color: #000;
					font-weight:100;
					width: 14px;
					height: 98px;
					padding: 40px 18px 0;
					
				}
				#acc ul li h3.active {
					background: #f42760;
					color: #fff;
				}
				#acc ul li  div {
					width: 383px;
					height: 138px;
					background: blue;
					position: absolute;
					top: 0;
					left: 50px;
					border-left:1px solid #ddd ;
					z-index: 0;
				}
				#acc ul li img{
					width: 383px;
					height: 138px;
				}
				#acc ul li.last {
					position: absolute;
					top: 0;
					right: 0;
				}
				
		</style>

//html代码
<div id="acc">
			<ul>
				<li class="active">
					<h3 class="active">红玫瑰</h3>
					<div><img src="img/bg1.jpg"></div>
				</li>
				<li>
					<h3>白玫瑰</h3>
					<div><img src="img/bg2.jpg"></div>
				</li>
				<li>
					<h3>白玫瑰</h3>
					<div><img src="img/bg3.jpg"></div>
				</li>
				<li>
					<h3>白玫瑰</h3>
					<div><img src="img/bg4.jpg"></div>
				</li>
				<li class="last">
					<h3>白玫瑰</h3>
					<div><img src="img/bg5.jpg"></div>
				</li>
			</ul>

		</div>

//js代码
<script>
			/*给li添加鼠标移入事件，当鼠标移入当前的li，把当前的li的宽度设置为434px,
			找到li下的h3为其添加.active类,再返回至li的同胞级,将他的li的宽度设置为50px;
			并移除li下的h3的类名;先请后加,再添加每一个动画对象之前进行清除,以免对后续的动画效果造成一定的影响;*/
			
			
			$(function(){
				$("#acc li").mouseover(function(){
					$(this).stop().animate({"width":"434px"},800)
					.find("h3").addClass("active").end()
					.siblings().stop().animate({"width":"50px"},800).find("h3").removeClass("active")
				});
			})
		</script>

链接图片img