JQ实现手风琴特效

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

这是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);
			});