jQuery | slideDown() 方法(1)

📌 相关文章

📜 jQuery | slideDown() 方法(1)

📅 最后修改于: 2023-12-03 15:32:12.475000 🧑 作者: Mango

jQuery | slideDown() 方法

简介

jQuery 中的 slideDown() 方法用于展示隐藏的 HTML 元素。该方法可以让元素从上向下以动画的形式展开。

语法

$(selector).slideDown(speed, callback);

参数

speed: 可选参数，规定动画的速度。取值可以为毫秒值，也可以为预设的 'slow'、'fast'，默认为 'normal'。
callback: 可选参数，在动画完成后执行的函数名称。

返回值

该方法返回 jQuery 对象。

示例

以下示例展示了 slideDown() 方法的基本用法。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example - jQuery slideDown() Method</title>
  <style>
    #panel {
      background-color: #eee;
      border: 1px solid #000;
      padding: 10px;
      display: none;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#flip").click(function(){
        $("#panel").slideDown("slow");
      });
    });
  </script>
</head>
<body>

<p id="flip">Click to show panel</p>
<div id="panel">
  <p>Hello World!</p>
</div>

</body>
</html>

在上述代码中，当我们点击 Click to show panel 文本时，会以 slow 的速度展示 Hello World! 文本内容。

注意事项

slideDown() 方法只作用于带有 height 属性的元素。如果元素的 height 属性为 auto，则该方法将不起作用。可以通过 CSS 的 height 属性或 jQuery 中的 height() 方法来设置元素的高度为具体数值。
slideDown() 方法只能用于展示元素。如果你需要收起元素，请使用 slideUp() 方法。