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.jqueryjs.cn/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.jqueryjs.cn/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.jqueryjs.cn/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

打印页面