jQuery显示隐藏切换show/hide/toggler

<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/01/ 16:38-->
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: red;
      display: none;
    }
  </style>
</head>
<body>
  <input type="button" value="显示" id="show"/>
  <input type="button" value="隐藏" id="hide"/>
  <input type="button" value="切换" id="toggle"/> <br/><br/>
  <div id="div1">我是一个div</div>
</body>
</html>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    // 1.显示
    $('#show').click(function () {
      // 给 id为 div1的元素, 动画显示
      // 没有参数, 没有动画效果
      // $('#div1').show();
      $('#div1').show(3000);

      // $('#div1').show('fast');
      // $('#div1').show('normal');
      // $('#div1').show('slow');

      // 3.回调函数
      // $('#div1').show(2000, function () {
      //   alert('动画执行完毕了...');
      // });
    });

    //2.隐藏
    $('#hide').click(function () {
      // 让id为div1的元素 动画隐藏
      // 没有参数, 没有动画效果
      // $('#div1').hide();
      $('#div1').hide(3000);
      // 也有 隐藏函数
      // $('#div1').hide(5000, function() {
      //   alert('我隐藏了');
      // });
    });

    //3.切换 toggle
    //如果元素是隐藏状态就动画显示; 如果元素是显示状态就动画影藏.
    $('#toggle').click(function () {
      $('#div1').toggle(3000);
    });

  });
</script>