使用 jQuery 控制一个搞度为 100px 的盒子，使宽度在 0~400px 之间持续动态变化，动画持续时间设置为“slow”

这个是要实现的功能：我的代码是下面这样的：我只能实现一次宽度的变化，如果要实现多次我应该怎么改呢

img

img


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <script src="./js/jquery-3.6.0.js"></script>
    <style>
        #box {
            height: 100px;
            width: 0px;
            background: #f00
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        $(function(){
            function aniDiv(){
                $("#box").animate({width:400},"slow");
                $("#box").animate({width:0},"slow",aniDiv);
            }
            aniDiv();
        })
    </script>
</body>

</html>