JavaScript 手风琴效果

<div id="box">
    <ul>
        <li>
            <img src="images/n1.jpg">
            <p class="p1">Nian糕 1</p>
            <p class="p2">Nian糕 1</p>
        </li>
        <li>
            <img src="images/n2.jpg">   
            <p class="p1">Nian糕 2</p>
            <p class="p2">Nian糕 2</p>
        </li>
        <li>
            <img src="images/n3.jpg">
            <p class="p1">Nian糕 3</p>
            <p class="p2">Nian糕 3</p>
        </li>
        <li>
            <img src="images/n1.jpg">
            <p class="p1">Nian糕 4</p>
            <p class="p2">Nian糕 4</p>
        </li>
        <li>
            <img src="images/n2.jpg">
            <p class="p1">Nian糕 5</p>
            <p class="p2">Nian糕 5</p>
        </li>
        <li>
            <img src="images/n3.jpg">
            <p class="p1">Nian糕 6</p>
            <p class="p2">Nian糕 6</p>
        </li>
    </ul>
</div>

#box {
    width: 1180px;
    height: 360px;
    border: 4px solid #000;
    margin: 100px auto;
    overflow: hidden;
}
ul {
    width: 2000px;
}
ul li {
    width: 197px;
    height: 360px;
    float: left;
    box-shadow: -4px 0 20px #000;
    position: relative;
}
img {
    width: 980px;
    height: 360px;
}
p {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 360px;
    background: rgba(0,0,0,.3);
    color: #fff;
    text-align: center;
    font-weight: bold;
}
.p1 {
    top: 0px;
}
.p2 {
    bottom: 0px;
}

$("#box ul li").hover(function(){
    $(this).stop().animate({
        "width": "960px"
    },1000).siblings().stop().animate({
        "width": "44px"
    },1000);
    $(this).find("p").stop().animate({
        "height": "40px",
        "line-height": "40px"
    },1000);
},function(){//鼠标移开实现什么效果
    $("#box ul li").stop().animate({
        "width": "197px"
    },1000);
    $(this).find("p").stop().animate({
        "height": "360px",
        "line-height": "360px"
    },1000);
});