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.jquery.com/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.jquery.com/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.jquery.com/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

列印頁面