jQuery插件怎样做动画效果

在 jQuery 中，动画效果通常通过内置动画方法、自定义动画（.animate()）或结合插件来实现。下面我分几种常见方式来说明，包括如何使用 jQuery 做动画以及如何写一个带动画的 jQuery 插件。

一、jQuery 内置动画方法（最常用）

1️⃣ 显示 / 隐藏类

$("#box").hide(500);   // 隐藏（动画）
$("#box").show(500);   // 显示
$("#box").toggle(500); // 切换

2️⃣ 滑入滑出

$("#box").slideDown(500);
$("#box").slideUp(500);
$("#box").slideToggle(500);

3️⃣ 淡入淡出

$("#box").fadeIn(500);
$("#box").fadeOut(500);
$("#box").fadeToggle(500);

二、使用 .animate() 自定义动画（核心）

$("#box").animate({
    width: "300px",
    height: "200px",
    opacity: 0.5,
    left: "100px"
}, 800, function () {
    // 动画完成回调
});

✅ 支持属性：

• width / height
• opacity
• left / top
• margin / padding
• 不支持背景色（需插件）

三、写一个简单的 jQuery 动画插件

示例：做一个“抖动动画”插件

(function ($) {
    $.fn.shake = function (options) {
        const settings = $.extend({
            distance: 10,
            duration: 100
        }, options);

        return this.each(function () {
            const $this = $(this);
            $this.animate({ left: "-=" + settings.distance }, settings.duration)
                 .animate({ left: "+=" + settings.distance * 2 }, settings.duration)
                 .animate({ left: "-=" + settings.distance }, settings.duration);
        });
    };
})(jQuery);

使用方式

$("#btn").click(function () {
    $("#box").shake();
});

四、动画队列与链式调用

$("#box")
    .slideUp(300)
    .delay(200)
    .fadeIn(300)
    .animate({ width: "400px" }, 500);

五、结合 CSS3 动画（推荐新项目）

jQuery 动画性能一般，新项目建议：

$("#box").addClass("animate");

.animate {
    transition: all 0.5s;
    transform: translateX(100px);
}

六、常用动画插件推荐

• jQuery UI（animate 支持颜色）
• Animate.css + jQuery
• Velocity.js（替代 jQuery animate，更快）

如果你愿意，我可以： ✅ 帮你写一个完整 jQuery 插件示例
✅ 写一个轮播 / 弹窗 / 菜单动画插件
✅ 对比 jQuery 动画 vs CSS 动画

你现在是想用动画还是写插件？