jquery动画

jQuery动画基础

jQuery提供了多种内置动画方法，可以轻松实现元素的动态效果。常用的动画方法包括show()、hide()、toggle()、fadeIn()、fadeOut()、fadeToggle()、slideDown()、slideUp()和slideToggle()。

show()和hide()用于显示或隐藏元素，可以指定动画持续时间：

$("#element").hide(1000); // 1秒内隐藏元素
$("#element").show(500);  // 0.5秒内显示元素

fadeIn()和fadeOut()实现淡入淡出效果：

$("#element").fadeOut(800); // 0.8秒淡出
$("#element").fadeIn(1200); // 1.2秒淡入

自定义动画animate()

animate()方法允许创建自定义动画，通过改变CSS属性实现复杂效果：

$("#box").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px'
}, 1000);

可以链式调用多个动画：

$("#box").animate({left: '250px'}, 500)
         .animate({top: '250px'}, 500);

动画队列控制

stop()方法用于停止当前正在运行的动画：

$("#element").stop(); // 立即停止当前动画

delay()可以在动画队列中添加延迟：

$("#element").slideUp(300).delay(200).slideDown(300);

动画回调函数

所有jQuery动画方法都支持回调函数，在动画完成后执行：

$("#element").fadeOut(1000, function() {
    alert("动画完成");
});

缓动效果

jQuery默认提供"linear"和"swing"缓动效果，使用jQuery UI可扩展更多缓动选项：

$("#element").animate({
    left: '500px'
}, 2000, "easeOutBounce");

注意事项

1. 颜色动画需要jQuery Color插件支持
2. 对display:none的元素执行动画会自动先显示元素
3. 使用finish()会立即完成所有排队动画
4. 动画性能优化建议使用CSS3动画替代复杂jQuery动画