抽屉式手风琴

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

* {
        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;
      }

$('#wrap ul li').hover(function() {
        $(this).stop().animate({
          width: '789px'
        }, 500).siblings().stop().animate({
          width: '100px'
        }, 500);
      });