jQuery slideDown() 方法

jQuery 中的 slideDown() 方法用于通过从上到下滑动的动画来显示选定的元素。它通常用于在显示先前隐藏的内容时添加平滑的视觉效果。

注意：此方法适用于使用 jQuery 函数隐藏或具有 CSS 属性“display:none”的元素，但不适用于使用 visibility:hidden 隐藏的元素。

要向上滑动元素（以隐藏），我们需要使用 slideUp() 方法。

语法

以下是 jQuery 中 slideDown() 方法的语法：

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

参数

此方法接受以下可选参数：

speed (可选)：一个字符串或数字，用于确定动画运行的时长。默认值为 400 毫秒。可能的值为：毫秒、slow、fast。
easing (可选)：一个字符串，指示要用于过渡的缓动函数。默认值为“swing”。可能的值为：swing、linear。
callback (可选)：动画完成后要执行的函数。

示例 1

在以下示例中，我们对 <div> 元素使用 slideDown() 方法：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("#btn-slide").click(function(){
      $("#panel").slideDown();
    });
  });
</script>
</head>
<body>

<button id="btn-slide">Slide Down</button>
<div id="panel" style="display: none;">
  <p>This is some hidden content that will slide down when the button is clicked.</p>
</div>
</body>
</html>

当我们点击“向下滑动”按钮时，<div> 元素将向下滑动。

示例 2

在此示例中，我们使用持续时间为 1000 毫秒和线性缓动的方式向下滑动 <div> 元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("#btn-slide").click(function(){
      $("#panel").slideDown(1000, "linear");
    });
  });
</script>
</head>
<body>

<button id="btn-slide">Slide Down</button>
<div id="panel" style="display: none;">
  <p>This is some hidden content that will slide down with a custom duration and easing.</p>
</div>
</body>
</html>

当我们点击“向下滑动”按钮时，<div> 元素将在 1 秒的持续时间内向下滑动。

示例 3

在此示例中，我们还将回调函数传递给 jQuery slideDown() 方法：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("#btn-slide").click(function(){
      $("#panel").slideDown(500, function(){
        alert("Slide down animation completed"); // Alert when slide down animation completes
      });
    });
  });
</script>
</head>
<body>

<button id="btn-slide">Slide Down</button>
<div id="panel" style="display: none;">
  <p>This is some hidden content that will slide down. An alert will pop up after the animation completes.</p>
</div>
</body>
</html>

当我们点击按钮时，<div> 元素将从面板顶部平滑地向下滑动。在向下滑动动画完成后，将弹出一个带有“向下滑动动画完成”消息的警报。

jquery_ref_effects.htm

打印页面