<style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1000px;
            height: 400px;
            margin: 50px;
        }

        li {
            float: left;
            width: 200px;
            height: 400px;
            overflow: hidden;
        }

        img {
            height: 400px;
        }
    </style>

<ul>
        <li><img src="img/m1.jpg" alt=""></li>
        <li><img src="img/m2.jpg" alt=""></li>
        <li><img src="img/m3.jpg" alt=""></li>
        <li><img src="img/m4.jpg" alt=""></li>
        <li><img src="img/m5.jpg" alt=""></li>
    </ul>

 <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        var $ul = $('ul');
        //事件委托
        $ul.on('mouseover', 'li', function () {
           $(this).stop().animate({
               width:600
           },'linear').siblings().stop().animate({
               width:100
           },'linear')
        })
        
        $ul.on('mouseleave','li',function(){
            $(this).stop().animate({
                width:200
            },'linear').siblings().stop().animate({
                width:200
            },'linear')
        })
    </script>