📅 最后修改于: 2023-12-03 15:32:12.481000 🧑 作者: Mango
slideToggle() 方法是 jQuery 的动画效果方法之一，用于隐藏或显示一个元素，并具有滑动效果。当元素隐藏时，通过点击触发元素可以显示；当元素显示时，通过点击触发元素可以隐藏。
slideToggle() 方法可以接受三个可选参数，分别为速度、easing 和 callback 函数。速度指定动画的速度，可以为字符串（如 "slow" 或 "fast"），或者以毫秒为单位的数字；easing 可以指定动画的缓动效果，也可以省略；callback 函数在动画完成后执行。
使用 slideToggle() 方法的基本语法如下：
$(selector).slideToggle(speed, easing, callback);
selector：要隐藏或显示的元素；speed：可选参数，指定动画的速度，可以是字符串（如 "slow" 或 "fast"），或者以毫秒为单位的数字；easing：可选参数，指定动画的缓动效果，可以指定一个已存在的缓动函数，或用自己的函数实现缓动；callback：可选参数，动画完成后执行的函数。以下是一个基本的使用 slideToggle() 方法的例子：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
#box {
background-color: #ccc;
width: 200px;
height: 200px;
display: none;
}
</style>
</head>
<body>
<button id="toggle-btn">点击切换元素状态</button>
<div id="box"></div>
</body>
<script>
$("#toggle-btn").click(function(){
$("#box").slideToggle("slow");
});
</script>
</html>
代码解析：
首先定义一个带有背景颜色为灰色的 div 元素，并设置初始化状态为隐藏。然后在页面中添加一个按钮元素，用于触发 slideToggle() 方法。在 click 事件中，通过选择器选中 div 元素，再调用 slideToggle() 方法，传入速度参数 "slow"，然后在动画完成后， div 元素的状态会被切换为显示/隐藏。
slideToggle() 方法是一种常用的动画效果方法，可以让页面更加生动有趣。选用 jQuery，可以让开发者轻松调用该方法，快速实现交互效果，提高用户体验。