jQuery UI | show() 方法(1)

📌 相关文章

📜 jQuery UI | show() 方法(1)

📅 最后修改于: 2023-12-03 14:43:12.443000 🧑 作者: Mango

jQuery UI | show() 方法

show() 方法是 jQuery UI 库中的一个功能丰富的方法，通过该方法可以显示被隐藏的 HTML 元素。

语法

$(selector).show(speed, easing, callback)

selector: 必填项，用于选择要显示的元素。
speed: 可选项，表示动画的时长，可以是毫秒数或者用 slow 和 fast 进行设置，默认为 400 毫秒。
easing: 可选项，表示用于这次动画的缓动函数，默认为 "swing"。
callback: 可选项，在动画完成之后要执行的函数。

显示元素

在 Web 应用程序开发中，我们通常需要在元素隐藏之后再显示元素，以保障用户体验的一致性。show() 方法可以在一个 HTML 元素被隐藏之后，方便地将其显示出来。

$(document).ready(function(){
  $("#showBtn").click(function(){ // 显示按钮绑定 click 事件
    $("#demo").show(); // 显示被隐藏的元素
  });
});

动画效果

show() 方法可以接收两个可选的参数来添加动画效果。第一个参数是表示动画时长的毫秒数，第二个参数则表示动画的缓动效果。下面的例子展示了如何在 jQuery 中设置动画效果：

$(document).ready(function(){
  $("#showBtn").click(function(){ // 显示按钮绑定 click 事件
    $("#demo").show("slow", function(){ // 以 "slow" 速度显示元素
      alert("动画显示完成！");
    });
  });
});

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI | show() 方法</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    #demo {
      width: 250px;
      height: 100px;
      background-color: #f2f2f2;
      border: 1px solid black;
      margin-top: 20px;
      display: none; /* 初始状态：隐藏 */
    }
  </style>
</head>
<body>

  <button id="showBtn">点击显示</button>

  <div id="demo">
    <h3>欢迎使用 jQuery UI 库</h3>
    <p>这是一个由 jQuery UI 提供的示例程序。</p>
  </div>

  <script>
    $(document).ready(function(){
      $("#showBtn").click(function(){ // 显示按钮绑定 click 事件
        $("#demo").show("slow", function(){ // 以 "slow" 速度显示元素
          alert("动画显示完成！");
        });
      });
    });
  </script>

</body>
</html>

上述代码演示了在 HTML 页面中如何使用 show() 方法，在按钮被点击时显示被隐藏的 HTML 元素，并添加动画效果。