jquery实现手风琴（横排）

版权声明：转载本文，请附录原文地址，如果错误，请联系我。 https://blog.csdn.net/qq_19880197/article/details/86679665

HTML

<div id="box">
    <ul>
        <li><img src="images/1.jpg" alt=""></li>
        <li><img src="images/2.jpg" alt=""></li>
        <li><img src="images/3.jpg" alt=""></li>
        <li><img src="images/4.jpg" alt=""></li>
    </ul>
</div>

CSS

*{
    padding: 0;
    margin: 0;
}
ul li{
    list-style: none;
}
div{
    width: 1000px;
    border: 1px solid red;
    height: 350px;
    margin: 150px auto;
    overflow: hidden;
}
div ul li{
    float: left;
    width: 200px;
    height: 350px;
}

jquery

 <script src="jQuery/jquery-1.12.3.js"></script>
    <script>
        $(function () {
           $("div li").mouseenter(function () {
               $(this).stop().animate({width:800}).siblings().stop().animate({width:200})
           }) .mouseleave(function () {
              $("div li").stop().animate({width:240});
           });
        });

    </script>