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");  

注意事项

1. 性能优化：避免同时操作大量元素的动画，可能引发卡顿。
2. CSS 限制：部分属性（如 background-color）需插件支持才能动画。
3. 现代替代方案：考虑使用 CSS3 动画（transition/@keyframes）实现更流畅的效果。

如需更复杂动画，可结合 jQuery UI 或 GSAP 等专业动画库。