jquery 切换页面效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 切换效果示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  .box {
    width: 200px;
    height: 200px;
    display: none;
  }
  #box1 { background-color: red; }
  #box2 { background-color: blue; }
</style>
</head>
<body>

<button id="toggleBtn">切换</button>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>

<script>
$(document).ready(function(){
  let isBox1Visible = true;
  $('#toggleBtn').click(function(){
    if (isBox1Visible) {
      $('#box1').fadeOut('slow');
      $('#box2').fadeIn('slow');
    } else {
      $('#box1').fadeIn('slow');
      $('#box2').fadeOut('slow');
    }
    isBox1Visible = !isBox1Visible;
  });
});
</script>

</body>
</html>