手风琴效果 animate

animate的手风琴效果

     <style type="text/css">
         * {
             margin: 0;
             padding: 0;
         }
         ul{
             list-style: none;
         }

         .wrap {
             width: 1020px;
             margin: 100px auto 0;
         }
         .wrap li{
             width: 200px;
             height: 400px;
             float: left;
         }
     </style>
 </head>
 <body>
 <div class="wrap">
     <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
     </ul>
 </div>
 </body>
 </html>
 <script src="jquery-1.11.1.min.js"></script>
 <script type="text/javascript">
     var  list = $("ul li");
     list.each(function(index,item){
         $(this).css('background','url(images/'+ (index + 1)+'.jpg)');
         $(this).mouseenter(function(){
             $(this).stop().animate({width:600},1000).siblings().stop().animate({width:100},1000)
         })
         $(this).mouseleave(function(){
             list.stop().animate({width:200},1000);
         })
     })
 </script>