jQuery UI show()方法

jQuery UI show() 方法是用于显示被隐藏的 HTML 元素，它是 jQuery UI 框架中的一个方法。这个方法可以用来显示那些之前使用了 hide() 方法进行了隐藏的 HTML 元素。

语法

以下是 show() 方法的基本语法:

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

参数说明：

speed: 规定动画的时长。可以设置的值有："slow"、"fast" 或毫秒数值
easing: 规定要使用的 easing 函数
callback: 在动画完成后要执行的函数名称

示例说明

示例一

下面的示例演示了如何使用 show() 方法来显示被隐藏的 HTML 元素:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI show() 方法示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <style>
    #content {
      display: none;
      padding: 10px;
      border: 1px solid #ccc;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div id="content">这是要显示的内容。</div>
  <button id="show">显示内容</button>
  <button id="hide">隐藏内容</button>
  <script>
    $(document).ready(function() {
      // 显示内容
      $("#show").click(function() {
        $("#content").show(1000);
      });
      // 隐藏内容
      $("#hide").click(function() {
        $("#content").hide(1000);
      });
    });
  </script>
</body>
</html>

在这个示例中，当用户单击“显示内容”按钮时，show() 方法被调用，这个方法使得 ID 为 “content” 的 div 元素从隐藏状态转换成显示状态，并带有 1000ms 的动画效果。

示例二

下面的示例演示了如何使用 show() 方法来显示一组被隐藏的 HTML 元素:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI show() 方法示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <style>
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    li {
      display: none;
      padding: 5px;
      border: 1px solid #ccc;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <ul>
    <li>第一条信息</li>
    <li>第二条信息</li>
    <li>第三条信息</li>
  </ul>
  <button id="show">显示信息</button>
  <button id="hide">隐藏信息</button>
  <script>
    $(document).ready(function() {
      // 显示内容
      $("#show").click(function() {
        $("li").show(1000);
      });
      // 隐藏内容
      $("#hide").click(function() {
        $("li").hide(1000);
      });
    });
  </script>
</body>
</html>

在这个示例中，当用户单击“显示信息”按钮时，show() 方法被调用，这个方法使得所有 li 元素从隐藏状态转换到显示状态，并带有 1000ms 的动画效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery UI show()方法 - Python技术站

语法

示例说明

示例一

示例二

相关文章