jQuery 図形をクリックすると大きさが変わるアニメーション #JavaScript

(やりたいこと)
円の図形をクリックすると、2,000ミリ秒かけて大きさが変わる。

width: 100px
height: 100px
　　　↓
width: 400px
height: 400px

(コード)

test.html

<!DOCTYPE html>

<html>
    <head>
        <style>
            #circle{
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background-color: red;
        </style>
    </head>
    <body>
        <script src="jquery-3.6.0.min.js"></script>

        <div id="circle"></div>

        <script type="text/javascript">
            $("#circle").click(function(){
         $("#circle").animate({width:"400px",height:"400px"},2000);
            })
        </script>
    </body>
</html>

(備考)
jQueryは、上記のtest.htmlと同じディレクトリにダウンロードしていて、

<script src="jquery-3.6.0.min.js"></script>

で、インストールしています。

jQueryダウンロードリンク
https://jquery.com/download/