jq手风琴效果

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style type="text/css">
         *{
             padding:0;
             margin:0;
         }
         ul,ol{
             list-style: none;
         }
         a{
             text-decoration: none;
             color:#333;
         }
         .box{
             width: 900px;
             height: 300px;
             border: 1px solid #000;
             margin: 50px auto;
             overflow: hidden;
             position: relative;
         }
         .box ul li{
             position: absolute;
             left:0px;
             width: 560px;
             height: 300px;
         }
         .box ul li.no1{
             left:180px;
         }
         .box ul li.no2{
             left:360px;
         }
         .box ul li.no3{
             left:540px;
         }
         .box ul li.no4{
             left:720px;
         }
         .box ul li .mask{
             position: absolute;
             width: 560px;
             height: 300px;
             left:0;
             top:0;
             background-color: rgba(0,0,0,.6);
         }
     </style>
 </head>
 <body>
     <div class="box">
         <ul>
             <li class="no0">
                 <div class="mask"></div>
                 <a href=""><img src="data:images/0.jpg" alt=""></a>
             </li>
             <li class="no1">
                 <div class="mask"></div>
                 <a href=""><img src="data:images/1.jpg" alt=""></a>
             </li>
             <li class="no2">
                 <div class="mask"></div>
                 <a href=""><img src="data:images/2.jpg" alt=""></a>
             </li>
             <li class="no3">
                 <div class="mask"></div>
                 <a href=""><img src="data:images/3.jpg" alt=""></a>
             </li>
             <li class="no4">
                 <div class="mask"></div>
                 <a href=""><img src="data:images/4.jpg" alt=""></a>
             </li>
         </ul>
     </div>
     <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
     <script type="text/javascript">
         $("li").mouseenter(function(){
             // 将触发事件的对象序号保存
             var idx = $(this).index();
             // 小于等于序号往左移动85
             $("li:lt(" + (idx + 1) + ")").each(function(i){
                 $(this).animate({"left": 85 * i},400);
             });

             // 大于信号序号往右移动
             $("li:gt(" + idx + ")").each(function(i){
                 // console.log(i);
                 $(this).animate({"left": 560 + 85 * (idx + i)},400);
             });

             // 鼠标进入图片去掉蒙版
             $(this).children(".mask").fadeOut();
             // 其他兄弟加上蒙版
             $(this).siblings().children(".mask").fadeIn();
         });

         // 鼠标离开恢复原状
         $(".box").mouseleave(function(){
             $("li").stop(true);
             $("li").each(function(i){
                 // console.log(i);
                 $(this).animate({"left": 180 * i},400);
             });
             $("li").children(".mask").fadeIn();
         });

     </script>
 </body>
 </html>