jQuery，别具一格的手风琴菜单

jQuery，别具一格的手风琴菜单

css的全部代码！！！

<style type="text/css" media="screen">
*{
	margin: 0;
	padding: 0;
}
.da{
	width: 1200px;
	height: 260px;
	margin:50px auto;
}
li{
	width: 171px;
	height: 260px;
	list-style: none;
	background: url(../images/20150120_ifold1.jpg) no-repeat center center;
	float: left;
	position: relative;
}
li:nth-child(1){
	width: 174px;
}
li:nth-child(2){
	background: url(../images/20150120_ifold2.jpg) no-repeat center center;
}
li:nth-child(3){
	background: url(../images/20150120_ifold3.jpg) no-repeat center center;
}
li:nth-child(4){
	background: url(../images/20150120_ifold4.jpg) no-repeat center center;
}
li:nth-child(5){
	background: url(../images/20150120_ifold5.jpg) no-repeat center center;
}
li:nth-child(6){
	background: url(../images/20150120_ifold6.jpg) no-repeat center center;
}
li:nth-child(7){
	background: url(../images/20150120_ifold7.jpg) no-repeat center center;
}
.mask{
	display: block;
	height: 100%;
	background: rgba(0,0,0,0.5);
}
p{
	color: #fff;
	font-size: 32px;
	width:42px;
	position: absolute;
	top: 20px;
	left: 50%;
	margin-left: -21px;
}
</style>

---

html的全部代码！！！！

<div class="da">
    <ul>
        <li>
        	<span class="mask"></span>
        	<p>温泉酒店</p>
        </li>
        <li>
        	<span class="mask"></span>
        	<p>情侣酒店</p>
        </li>
        <li>
        	<span class="mask"></span>
        	<p>设计师酒店</p>
        </li>
        <li>
        	<span class="mask"></span>
        	<p>青年旅舍</p>
        </li>
        <li>
        	<span class="mask"></span>
        	<p>特色客栈</p>
        </li>
        <li>
        	<span class="mask"></span>
        	<p>海岛酒店</p>
        </li>
        <li>
        	<span class="mask"></span>
        	<p>海外温泉</p>
        </li>
    </ul>
</div>

---

$(function(){
	$("li").mouseenter(function(){
		$(this).find("span").removeClass("mask");
		$(this).find("p").hide();
		$(this).siblings().stop().animate({
			"width":"133px"
		},50);
		$(this).stop().animate({
			"width":"400px"
		},50);
	});
	$("li").mouseleave(function(){
		$(this).find("span").addClass("mask");
		$(this).find("p").show();
	});
	$("ul").mouseleave(function(){
		$("li").eq(0).stop().animate({
			"width":"174px"
		},50);
		$("li").not(":first").stop().animate({
			"width":"171px"
		},50);
	});
});

---

基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效。效果图如下：

---

亲们，这次我们做的和上次的手风琴不一样，这次是横向的，很多网站里都会用到，希望我的可以帮到大家，see you！！！