Jquery ＜＜ 四格手风琴案例

html部分内容

创建一个ul，4个li，每个li中各装一张图片

<ul class="sfq">
        <li class="li_">
                <img src="./img/kj1.png" alt="">
        </li>
        <li class="li_">
                <img src="./img/kj2.png" alt="">
        </li>
        <li class="li_">
                <img src="./img/kj3.png" alt="">
        </li>
        <li class="li_">
                <img src="./img/kj4.jpg" alt="">
        </li>
    </ul>

CSS样式

这里给li设置为inline-block行内块元素，或者给ul设置display：flex；

.sfq{
    width: 100%;
    height: 30rem;
    margin: 10rem auto;
    list-style: none;
    text-align: center;
    overflow: hidden;
}

.sfq>li {
    display: inline-block;
    width: 200px;
    height: 30rem;
    overflow: hidden;
}

.sfq img {
    width: 400px;
    height: 100%;
}

JS部分

 <!-- 先引入jq文件 -->
    <script src="./jquery.mini.js"></script>
    
    <script>
            $(function () {
                $(".li_").mouseenter(function () {
                    $(this).stop().animate({
                        width: 400
                    }).siblings().stop().animate({
                        width: 100
                    })
                })

                $(".li_").mouseleave(function () {
                    $(this).stop().animate({
                        width: 200
                    }).siblings().stop().animate({
                        width: 200
                    })
                })
            })
    </script>