JQ实现手风琴特效

自己写的第一个博客，也是把我看来的学到的整理一下，不会玩这个博客，废话不多说，今天分享的是一个手风琴特效`

这是div部分代码 很基本的，这里引入了四张图片

<div id="wrap">
	<ul>
		<li style="background-image:url(img/1.jpg)">
			<div class='txt'>
				<p>哈哈哈哈哈哈哈</p>
			</div>
		</li>
		<li style="background-image:url(img/2.jpg)">

			<div class='txt'>
				<p>哈哈哈哈哈哈哈</p>

			</div>
		</li>
		<li style="background-image:url(img/3.jpg)">
			<div class='txt'>
				<p>哈哈哈哈哈哈哈</p>
			</div>
		</li>
		<li style="background-image:url(img/4.jpg); width:789px;">
			<div class='txt'>
				<p>哈哈哈哈哈哈哈</p>
			</div>
		</li>
	</ul>
</div>

接下来是CSS

*{ margin:0; padding:0;}
body{
	background:url(img/bg.jpg) center top no-repeat;;
}
#wrap{
	width:1090px;
	height:429px;
	margin:160px auto;
	overflow:hidden;
}
#wrap ul{
	width:120%;
}
#wrap ul li{
	list-style:none;
	width:100px;
	height:429px;
	float:left;
}
#wrap ul li .txt{
	width:100px;
	height:429px;
	background:rgba(0,0,0,.5);
	overflow:hidden;
}
#wrap ul li .txt p{
	padding:0px 42px;
	background:rgba(0,0,0,.5);
	color:#fff;
	font-family:'Microsoft yahei';
	font-size:14px;
}

接下来JQ代码，很简洁通过hover，覆盖到的对象让他图片的大小恢复原样，其他图片则100px

	$('#wrap ul li').hover(function(){
				$(this).stop().animate({
					width : '789px'
				},500).siblings().stop().animate({
					width : '100px'
				},500);
			});