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！！！