jQuery | slideToggle() 方法(1)

📌 相关文章

📜 jQuery | slideToggle() 方法(1)

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

jQuery | slideToggle() 方法

jQuery | slideToggle() 方法是一个用于切换元素的显示与隐藏的动画效果。它可以将元素的高度从零到完整高度逐渐变化，同时也可以在元素展开与关闭时添加动画效果。

语法

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

selector: 需要切换显示与隐藏的元素。

speed: 可选参数，用于设置动画的速度。可以是毫秒值，也可以是字符串 "slow"、"fast" 或 "normal"。

callback: 可选参数，动画完成后所需执行的回调函数。

实例

以下的例子展示了如何使用 slideToggle() 方法来切换一个 div 元素的显示和隐藏：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#toggle-btn").click(function(){
    $("#toggle-div").slideToggle();
  });
});
</script>
</head>
<body>

<button id="toggle-btn">切换</button>
<div id="toggle-div" style="background-color: #f2f2f2;padding: 20px;display: none;">
  <p>这是一段文本，用于演示 slideToggle() 方法。</p>
</div>

</body>
</html>

点击按钮后，div 元素会从隐藏状态逐渐展开，再次点击按钮则会把元素逐渐收起并隐藏。

效果参数

除了可以使用速度参数之外，还可以使用一些其他参数来调整 slideToggle() 方法的效果，这些参数包括：

direction：用于指定元素展开/关闭的方向，可以取值 "up"、"down"、"left" 或 "right"。
easing：用于设置元素的缓动效果，可以取值 "linear"、"swing" 或其他 jQuery Easing 插件定义的效果名称。
complete：动画完成后执行的函数，与 callback 参数作用相同。

结论

slideToggle() 方法是 jQuery 中用于切换元素显示与隐藏的非常有用的方法。它可以通过改变元素高度的方式来实现动画效果，同时也支持一些额外的参数来调整动画的细节。在需要实现展开/关闭效果的页面上，它将是一个很好的工具。