我想尝试让一个圆圈从 20px 增长到 300px。它应该只是为了缩小尺寸而放大。有一个按钮可以单击以启动操作。每次单击该按钮时，都应该在 counter 中添加一个，上面写着“Grow and Shrink Counter:”。

$(document).ready(function() {
  $("button").click(function() {
    $("div").animate({
      height: '300px',
      width: '300px'
    });
    $("div").animate({
      height: '20px',
      width: '20px'
    });
  });
});

let counter = 0

document.querySelector("#counter").addEventListener('click', function() {
  counter++
  this.innerHTML = counter
})

html {
  height: 100%;
}

#shrink {
  height: 1px;
  width: 1px;
  border-radius: 50%;
  background-color: lightgreen;
  margin: 5px;
  position: relative;
  color: white;
}

#container1 {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#container2 {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 75%;
}

#grow {
  margin: 5px;
  border-radius: 10px;
}

#counter {
  text: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container1">
  <button id="grow"><span style="font-size:20px">Grow</span> and <span style="font-size:8px">Shrink</span></button>
  <p id="counter">Grow and Shrink Counter:</p>
</div>
<div id="container2">
  <div id="shrink"></div>
</div>