jquery的动画
jQuery 动画基础
jQuery 提供了一系列内置动画方法，用于实现元素的动态效果，如显示/隐藏、淡入淡出、滑动和自定义动画。
显示与隐藏动画
show()/hide()：通过调整元素的宽、高和不透明度实现显示或隐藏。toggle()：根据当前状态切换显示或隐藏。$("#element").show(1000); // 1秒内显示 $("#element").hide("slow"); // 慢速隐藏
淡入淡出效果
fadeIn()/fadeOut()：通过调整不透明度实现淡入淡出。fadeToggle()：切换淡入/淡出状态。fadeTo()：调整到指定不透明度。$("#element").fadeIn(500); // 0.5秒淡入 $("#element").fadeTo(1000, 0.5); // 1秒内变为半透明
滑动效果
slideDown()/slideUp()：通过调整高度实现滑动展开或收起。slideToggle()：切换滑动状态。$("#element").slideDown("fast"); // 快速滑下 $("#element").slideToggle(200); // 200毫秒切换滑动
自定义动画（animate）
animate() 方法允许通过 CSS 属性创建自定义动画，支持数值属性（如 width、marginLeft）和预定义值（如 "hide"）。
基本语法
$("#element").animate(
{
width: "200px",
opacity: 0.5
},
1000, // 动画时长（毫秒）
"linear", // 缓动函数
function() {
console.log("动画完成");
}
);参数说明
- 属性对象：需动画化的 CSS 属性和目标值。
- 时长：毫秒或预定义字符串（
"slow"、"fast"）。 - 缓动函数：如
"linear"、"swing"（默认）。 - 回调函数：动画完成后执行。
动画队列与控制
链式动画
jQuery 动画默认加入队列，按顺序执行：
$("#element")
.slideDown(1000)
.fadeOut(800);控制方法
stop()：停止当前动画。finish()：立即完成所有队列动画。delay()：延迟后续动画。$("#element").stop(true, true); // 清除队列并立即完成当前动画 $("#element").delay(500).fadeIn(); // 延迟500毫秒后淡入
缓动效果扩展
jQuery UI 提供额外缓动函数（如 "easeInOutBack"），需引入 jQuery UI 库：
$("#element").animate({ left: "100px" }, 1000, "easeInOutBack");注意事项
- 动画性能：避免同时操作大量元素或复杂属性。
- 单位一致性：确保 CSS 属性值带单位（如
"px"）。 - 回调函数：用于动画完成后执行逻辑，避免异步问题。
通过结合内置方法和 animate()，可实现丰富的交互效果，适用于多数动态场景。
