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