jQuery 提供了几种简单易用的方法来执行常见的滑动动画效果。以下是 slideDown()、slideUp() 和 slideToggle() 方法的详细介绍和示例。
1. slideDown()
slideDown() 方法用于逐渐展开（向下滑动）一个元素。
语法：
$(selector).slideDown([duration], [easing], [complete]);
- duration: 可选，动画持续时间（例如："slow", "fast" 或毫秒数）。
- easing: 可选，动画的效果（例如："swing", "linear"）。
- complete: 可选，动画完成后执行的回调函数。
示例：
HTML:
<button id="btnSlideDown">Slide Down</button>
<div id="myDiv" style="display:none; height:100px; background:red;">
Hello World
</div>
JavaScript:
$(document).ready(function(){
$("#btnSlideDown").click(function(){
$("#myDiv").slideDown("slow");
});
});
2. slideUp()
slideUp() 方法用于逐渐收起（向上滑动）一个元素。
语法：
$(selector).slideUp([duration], [easing], [complete]);
- duration: 可选，动画持续时间。
- easing: 可选，动画的效果。
- complete: 可选，动画完成后执行的回调函数。
示例：
HTML:
<button id="btnSlideUp">Slide Up</button>
<div id="myDiv" style="height:100px; background:red;">
Hello World
</div>
JavaScript:
$(document).ready(function(){
$("#btnSlideUp").click(function(){
$("#myDiv").slideUp("slow");
});
});
3. slideToggle()
slideToggle() 方法用于切换元素的滑动状态。如果元素是隐藏的，它将滑动展开；如果元素是显示的，它将滑动收起。
语法：
$(selector).slideToggle([duration], [easing], [complete]);
- duration: 可选，动画持续时间。
- easing: 可选，动画的效果。
- complete: 可选，动画完成后执行的回调函数。
示例：
HTML:
<button id="btnSlideToggle">Slide Toggle</button>
<div id="myDiv" style="height:100px; background:red;">
Hello World
</div>
JavaScript:
$(document).ready(function(){
$("#btnSlideToggle").click(function(){
$("#myDiv").slideToggle("slow");
});
});
