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 动画高效，但兼容性更好。