jquery的动画
jQuery 动画基础
jQuery 提供了多种动画方法，用于实现元素的动态效果。常用的动画方法包括 animate()、fadeIn()、fadeOut()、slideUp()、slideDown() 等。
animate() 是 jQuery 中最灵活的动画方法，允许自定义 CSS 属性的变化。语法如下：
$(selector).animate({properties}, duration, easing, callback);properties：需要动画的 CSS 属性（如width、opacity）。duration：动画持续时间（毫秒或"slow"/"fast"）。easing：动画速度曲线（默认"swing"，可选"linear"）。callback：动画完成后的回调函数。
示例：使用 animate()
$("#box").animate({
width: "200px",
opacity: 0.5
}, 1000, function() {
console.log("动画完成");
});淡入淡出效果
fadeIn() 和 fadeOut() 用于控制元素的淡入淡出：
$("#box").fadeIn(500); // 淡入，持续 500 毫秒
$("#box").fadeOut("slow"); // 淡出，使用预设速度 "slow"滑动效果
slideUp() 和 slideDown() 实现元素的垂直滑动：
$("#box").slideDown(300); // 向下滑动展开
$("#box").slideUp(300); // 向上滑动收起链式动画
jQuery 支持链式调用，可以按顺序执行多个动画：
$("#box")
.fadeOut(500)
.fadeIn(500)
.slideUp(500);停止动画
stop() 方法可以停止当前动画：
$("#box").stop(); // 立即停止当前动画
$("#box").stop(true, true); // 停止并直接跳转到最终状态自定义动画队列
queue() 和 dequeue() 允许自定义动画队列：
$("#box")
.queue(function(next) {
$(this).css("background", "red");
next(); // 继续执行队列
})
.animate({width: "300px"}, 500);注意事项
- 并非所有 CSS 属性都支持动画，例如
display或font-size可能需要特殊处理。 - 频繁触发动画可能导致性能问题，建议使用
requestAnimationFrame或 CSS 动画替代复杂场景。 - jQuery 动画在现代浏览器中可能不如 CSS3 动画高效，但兼容性更好。
