jQuery slideToggle() 方法

jQuery 中的 slideToggle() 方法用於為選定的元素製作高度動畫。它在選定元素的 slideDown() 和 slideUp() 方法之間切換。此方法檢查選定元素的可見性。如果元素當前隱藏，則觸發 slideDown() 效果。或者，如果元素已可見，則啟動 slideUp() 效果。這會產生切換效果。

語法

以下是 jQuery 中 sideToggle() 方法的語法：

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

引數

此方法接受以下可選引數：

speed (可選): 一個字串或數字，用於確定動畫執行的時長。預設值為 400 毫秒。可能的值為：毫秒數、slow、fast。
easing (可選): 一個字串，指示要用於過渡的緩動函式。預設值為 "swing"。可能的值為：swing、linear。
callback (可選): 動畫完成後要執行的函式。

示例 1

以下示例在單擊按鈕時切換段落的可見性：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#toggleBtn").click(function(){
    $("#toggleParagraph").slideToggle();
  });
});
</script>
</head>
<body>

<button id="toggleBtn">Toggle Paragraph</button>
<p id="toggleParagraph" style="display:none;">This paragraph will slide up and down.</p>
</body>
</html>

單擊按鈕時，我們可以看到段落元素上的切換效果。

示例 2

下面的示例在單擊時切換影像的可見性，持續時間為 1000 毫秒，並使用線性緩動：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#toggleImage").click(function(){
    $("#image").slideToggle(1000, "linear");
  });
});
</script>
</head>
<body>

<img id="image" src="https://cdn.pixabay.com/photo/2023/05/20/16/48/dog-8006839_1280.jpg" height="300px" width="400px" style="display:none;">
<button id ="toggleImage">Toggle Image</button>
</body>
</html>

單擊按鈕時，我們可以看到影像元素上的切換效果。

示例 3

在此示例中，我們還將回調函式傳遞給 jQuery slideToggle() 方法：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#toggleBtn").click(function(){
    $("#toggleList").slideToggle(1000, function(){
      alert("toggle animation completed!")
    });
  });
});
</script>
</head>
<body>
<button id="toggleBtn">Toggle List</button>
<ul id="toggleList" style="display:none;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>jQuery</li>
</ul>
</body>
</html>

單擊按鈕時，<div> 元素將被切換。切換動畫完成後，將彈出一個帶有“切換動畫完成”訊息的警報。

jquery_ref_effects.htm

列印頁面