在 jQuery 中，toggle方法是一个非常实用的功能，它能够根据元素的当前显示状态在显示和隐藏之间进行切换。
duration (默认: 400)
类型: Number or String
一个字符串或者数字决定动画将运行多久。
complete
类型: Function()
在动画完成时执行的函数。
类型: PlainObject
一组包含动画选项的值的集合。 支持的选项:
duration (default: 400)
Type: Number or String
一个字符串或者数字决定动画将运行多久。（注：默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或"fast")或表示动画时长的毫秒数值(如：1000) ）
easing (default: swing)
Type: String
一个字符串，表示过渡使用哪种缓动函数。（注：jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件）
queue (default: true)
Type: Boolean or String
一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。 从jQuery1.7开始，队列选项也可以接受一个字符串，在这种情况下，在动画被添加到由该字符串表示的队列中。当一个自定义的队列名称被使用，动画不会自动启动;你必须调用.dequeue("queuename")来启动它。
specialEasing
Type: PlainObject
一组一个或多个通过相应的参数和相对简单函数定义的CSS属性 ( 1.4 新增)
step
Type: Function( Number now, Tween tween )
每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
progress
Type: Function( Promise animation, Number progress, Number remainingMs )
每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数。 (version added: 1.8)
complete
Type: Function()
在动画完成时执行的函数。
done
Type: Function( Promise animation, Boolean jumpedToEnd )
在动画完成时执行的函数。 (他的Promise对象状态已完成). (version added: 1.8)
fail
Type: Function( Promise animation, Boolean jumpedToEnd )
动画失败完成时执行的函数。(他的Promise对象状态未完成)。 (version added: 1.8)
always
Type: Function( Promise animation, Boolean jumpedToEnd )
在动画完成或未完成情况下停止时执行的函数。(他的Promise对象状态已完成或未完成)。 (version added: 1.8)
duration (默认: 400)
类型: Number or String
一个字符串或者数字决定动画将运行多久。持续时间是以毫秒为单位的，数值越大，动画越慢。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。
easing (默认: swing)
类型: String
一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）
complete
类型: Function()
在动画完成时执行的函数。
showOrHide
类型: Boolean
一个布尔值，指示元素是显示或隐藏。
 | 注意:事件处理套件也有一个名为.toggle()方法。其参数格式是.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject) ] )。 这个方法在jQuery 1，8中宣告过时，在jQuery 1.9中已经移除；哪一个被调用取决于传递的参数的设置。 |
.toggle()方法等价于.hide()和.show()方法
$('#myDiv').toggle();等于
if ($('#myDiv').is(':visible')) {
$('#myDiv').hide();
} else {
$('#myDiv').show();
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>炫代码wwww.xuandaima.com jQuery 教程</title>
<script src="/Template/Foreground/js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$('#toggleButton').click(function() {
$('#myDiv').toggle();
});
});
</script>
</head>
<body>
<button id="toggleButton">切换显示状态</button>
<div id="myDiv">这是一个可切换显示的元素</div>
</body>
</html>在这个例子中，点击按钮时，#myDiv元素会在显示和隐藏之间切换。
<script>
$(document).ready(function() {
$('#showButton').click(function() {
$('#myDiv').toggle(1000, 'linear');
$('#myDiv2').toggle(1000, 'swing');
});
});
</script>
<div id="myDiv"></div>
<div id="myDiv2"></div>
<button id="showButton">显示隐藏元素（动画）</button>点击按钮后，#myDiv元素会以 1000 毫秒的线性效果进行显示或隐藏的切换。
<script>
$(document).ready(function() {
$('#toggleButton').click(function() {
$('#myDiv').toggle(500, 'swing', function() {
if ($('#myDiv').is(':visible')) {
alert('元素已显示');
} else {
alert('元素已隐藏');
}
});
});
});
</script>
<button id="toggleButton">切换显示状态（带回调）</button>
<div id="myDiv"></div>当切换动画完成后，根据元素的最终显示状态弹出相应的提示。
1. 性能优化：当使用动画效果（指定非零的 `duration` 值）时，要注意动画的复杂性和持续时间对性能的影响。过长或过于复杂的动画可能导致页面卡顿，特别是在资源受限的设备上。
2. 浏览器兼容性：不同的浏览器对于动画和缓动效果的支持可能存在细微差异。尽管 jQuery 努力提供一致的体验，但在某些特殊情况下，可能会有不一致的表现。因此，在实际应用中，需要在多种主流浏览器上进行充分测试。
3. 元素初始状态：如果元素在初始时通过其他方式设置了特定的显示状态（如通过 CSS 规则），`toggle` 方法可能会覆盖这些初始设置。确保元素的最终显示状态符合预期。
4. 用户体验：在设计页面交互时，要考虑toggle方法的使用是否符合用户的预期和习惯。过于频繁或意外的显示/隐藏切换可能会让用户感到困惑或不满。
通过对toggle方法的深入理解，并谨慎处理上述的注意事项，可以更有效地利用它来创建动态、交互性强且用户体验良好的网页。
