jquery动画
jQuery 动画基础
jQuery 提供了多种动画方法，用于实现元素的动态效果。核心方法包括：
.animate()：自定义 CSS 属性的过渡动画。.fadeIn()/.fadeOut()：淡入淡出效果。.slideUp()/.slideDown()：垂直滑动效果。.toggle()：切换显示/隐藏状态。
示例：淡入淡出效果
$("#element").fadeIn(1000); // 1秒淡入
$("#element").fadeOut(500); // 0.5秒淡出 自定义动画 .animate()
通过 .animate() 可以自定义 CSS 属性的变化过程，支持数值类属性（如 width、opacity）。
语法
$(selector).animate(properties, duration, easing, callback); properties：目标 CSS 属性的键值对（如{left: '250px'}）。duration：动画时长（毫秒或"slow"/"fast"）。easing：缓动函数（默认"swing"，可选"linear"）。callback：动画完成后的回调函数。
示例
$("#box").animate({
left: '200px',
opacity: 0.5
}, 1000, function() {
alert("动画完成");
}); 链式动画
jQuery 支持链式调用，允许多个动画按顺序执行：
$("#box")
.animate({left: '100px'}, 500)
.animate({top: '50px'}, 500); 停止动画 .stop()
中断当前动画或清空动画队列：
$("#box").stop(); // 立即停止当前动画
$("#box").stop(true, true); // 停止所有动画并跳转到最终状态 缓动效果
jQuery 默认提供 "swing"（先快后慢）和 "linear"（匀速）两种缓动效果。需引入额外插件（如 jQuery UI）支持更多缓动函数。
示例
$("#box").animate({left: '300px'}, 1000, "easeOutBounce"); 注意事项
- 性能优化：避免同时操作大量元素的动画，可能引发卡顿。
- CSS 限制：部分属性（如
background-color）需插件支持才能动画。 - 现代替代方案：考虑使用 CSS3 动画（
transition/@keyframes）实现更流畅的效果。
如需更复杂动画，可结合 jQuery UI 或 GSAP 等专业动画库。
