本章内容：
1. 显示/隐藏效果 |
2. 淡入淡出效果 |
3. 滑动效果 |
4. 自定义动画
jQuery提供了丰富的动画方法，可以让网页元素实现平滑的过渡效果，提升用户体验。
1. 显示/隐藏效果
jQuery提供了show()、hide()和toggle()方法来实现元素的显示和隐藏。
隐藏元素
显示元素
切换显示
这是一个演示元素，点击按钮查看效果
代码示例：
// 基本用法
$("#hideBtn").click(function(){
$("#element").hide(); // 隐藏元素
});
$("#showBtn").click(function(){
$("#element").show(); // 显示元素
});
$("#toggleBtn").click(function(){
$("#element").toggle(); // 切换显示/隐藏
});
// 带参数的用法（单位：毫秒）
$("#element").hide(1000); // 1秒内隐藏
$("#element").show("slow"); // 慢速显示（600ms）
$("#element").toggle("fast"); // 快速切换（200ms）
// 带回调函数
$("#element").hide(1000, function(){
console.log("隐藏完成！");
});
2. 淡入淡出效果
淡入淡出效果通过改变元素的透明度来实现平滑过渡。
淡入
淡出
切换淡入淡出
淡入到0.5透明度
淡入淡出演示区域
代码示例：
// 淡入效果
$("#fadeInBtn").click(function(){
$("#element").fadeIn(1000); // 1秒内淡入
});
// 淡出效果
$("#fadeOutBtn").click(function(){
$("#element").fadeOut("slow"); // 慢速淡出
});
// 切换淡入淡出
$("#fadeToggleBtn").click(function(){
$("#element").fadeToggle(500); // 0.5秒切换
});
// 淡入到指定透明度（0-1之间）
$("#fadeToBtn").click(function(){
$("#element").fadeTo(1000, 0.5); // 1秒内淡入到50%透明度
});
// 带回调函数
$("#element").fadeOut(1000, function(){
alert("淡出完成！");
});
3. 滑动效果
滑动效果通过改变元素的高度来实现展开和收缩的动画。
向下滑动
向上滑动
切换滑动
滑动内容区域
这是一个可滑动的div元素，点击按钮查看滑动效果。
滑动效果通过改变高度实现平滑过渡。
代码示例：
// 向下滑动（显示）
$("#slideDownBtn").click(function(){
$("#element").slideDown(800); // 0.8秒向下滑动
});
// 向上滑动（隐藏）
$("#slideUpBtn").click(function(){
$("#element").slideUp("fast"); // 快速向上滑动
});
// 切换滑动
$("#slideToggleBtn").click(function(){
$("#element").slideToggle(600); // 0.6秒切换
});
// 链式调用
$("#element")
.slideUp(500)
.delay(300) // 延迟300ms
.slideDown(500);
// 带回调函数
$("#element").slideUp(1000, function(){
console.log("向上滑动完成");
});
4. 自定义动画
animate()方法允许创建自定义动画，可以操作多个CSS属性。
移动并变大
颜色和边框变化
重置位置
可动元素
代码示例：
// 基本动画 - 移动元素
$("#animateBtn").click(function(){
$("#box").animate({
left: '250px', // 向右移动250px
opacity: 0.5, // 透明度变为0.5
width: '+=150px', // 宽度增加150px
height: '+=100px' // 高度增加100px
}, 1000); // 动画时长1秒
});
// 队列动画 - 多个动画依次执行
$("#queueBtn").click(function(){
$("#box")
.animate({left: '300px'}, 500)
.animate({top: '300px'}, 500)
.animate({left: '0'}, 500)
.animate({top: '0'}, 500);
});
// 相对值动画
$("#relativeBtn").click(function(){
$("#box").animate({
left: '+=50px', // 向右移动50px
height: 'toggle' // 高度切换（如果当前是显示则隐藏，反之亦然）
});
});
// 使用预定义值
$("#predefinedBtn").click(function(){
$("#box").animate({
height: 'toggle',
opacity: 'toggle'
}, 1500);
});
// 停止动画
$("#stopBtn").click(function(){
$("#box").stop(); // 停止当前动画
});
// 停止所有动画并清除队列
$("#stopAllBtn").click(function(){
$("#box").stop(true, true);
});
注意：使用animate()时，需要确保元素的position属性设置为relative、fixed或absolute，否则left/top等属性无效。
jQuery动画方法速查表
方法
描述
速度参数
show() / hide()
显示/隐藏元素
毫秒、"slow"、"fast"
toggle()
切换显示/隐藏状态
同上
fadeIn() / fadeOut()
淡入/淡出元素
同上
fadeToggle()
切换淡入/淡出
同上
fadeTo()
淡入到指定透明度
时间, 透明度(0-1)
slideDown() / slideUp()
向下/向上滑动
毫秒、"slow"、"fast"
slideToggle()
切换滑动效果
同上
animate()
自定义CSS动画
时间, 缓动函数, 回调
stop()
停止当前动画
无
delay()
设置动画延迟
毫秒数
动手练习
尝试实现一个综合动画效果：
创建一个div元素，设置初始样式
点击按钮时，div先淡出，然后向右移动，同时变大，最后淡入
使用链式调用实现
运行动画
练习元素