jquery 动画

jQuery 动画基础

jQuery 提供了一系列动画方法，允许通过简单的代码实现平滑的视觉效果。核心方法包括 animate()、fadeIn()、fadeOut()、slideUp()、slideDown() 等。

// 示例：基础动画
$("#element").animate({
    opacity: 0.5,
    left: "+=50px"
}, 1000); // 持续1秒

使用 animate() 自定义动画

animate() 是 jQuery 中最灵活的动画方法，支持通过 CSS 属性变化实现自定义动画。

$("#box").animate({
    width: "200px",
    height: "200px",
    marginLeft: "50px"
}, {
    duration: 1500,
    easing: "swing", // 或 "linear"
    complete: function() {
        console.log("动画完成");
    }
});

预定义动画效果

jQuery 内置了常用动画效果，无需手动编写 CSS 属性：

• fadeIn() / fadeOut()：淡入淡出。
• slideUp() / slideDown()：垂直滑动。
• toggle()：切换显示/隐藏。

$("#button").click(function() {
    $("#panel").fadeToggle(500); // 500毫秒切换淡入淡出
});

动画队列与链式调用

jQuery 动画默认加入队列，按顺序执行。可通过链式调用组合多个动画：

$("#element")
    .slideDown(800)
    .delay(200) // 延迟200毫秒
    .fadeOut(600);

控制动画状态

• stop()：停止当前动画。
• finish()：立即完成所有动画。

$("#stopButton").click(function() {
    $("#element").stop(true, true); // 清除队列并跳转到最终状态
});

缓动效果（Easing）

jQuery 默认支持 swing（缓入缓出）和 linear（线性）缓动。需引入插件（如 jquery.easing）支持更多效果。

$("#element").animate({ left: "100px" }, {
    duration: 1000,
    easing: "easeOutBounce" // 需插件支持
});

注意事项

• 避免过度使用动画，可能影响性能。
• 对 display: none 的元素使用 fadeIn() 时，jQuery 会自动处理初始状态。
• 使用 requestAnimationFrame 的现代替代方案（如 CSS3 动画）可能更适合复杂场景。

通过合理组合上述方法，可以高效实现丰富的交互效果。