如何用jQuery插件做动画

下面用循序渐进的方式，告诉你如何用 jQuery 插件做动画，从“直接用 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);

4️⃣ 自定义动画（最常用）

$("#box").animate({
  width: "300px",
  opacity: 0.5,
  marginLeft: "100px"
}, 1000);

二、常用的 jQuery 动画插件

✅ 1. jQuery UI（官方增强）

适合：复杂动画、缓动、拖拽

引入：

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>

使用：

$("#box").effect("shake", { times: 3 }, 500);

$("#box").animate({
  width: 300
}, {
  duration: 1000,
  easing: "easeOutBounce"
});

✅ 2. Animate.css + jQuery（推荐）

适合：简单炫酷动画

引入：

<link rel="stylesheet" href="animate.min.css">

使用：

$("#box")
  .addClass("animate__animated animate__bounce")
  .one("animationend", function () {
    $(this).removeClass("animate__bounce");
  });

✅ 3. Velocity.js（高性能动画）

适合：大量动画、性能好

引入：

<script src="jquery.js"></script>
<script src="velocity.min.js"></script>

使用：

$("#box").velocity({
  translateX: 200,
  opacity: 0.5
}, {
  duration: 800,
  easing: "easeOutQuad"
});

✅ 4. wow.js + jQuery（滚动动画）

适合：页面滚动出现动画

<script src="wow.min.js"></script>
<link rel="stylesheet" href="animate.min.css">

new WOW().init();

<div class="wow fadeInUp">内容</div>

三、自己写一个 jQuery 动画插件（进阶）

(function ($) {
  $.fn.myFade = function (speed) {
    return this.each(function () {
      $(this).animate({ opacity: 0.2 }, speed);
    });
  };
})(jQuery);

使用：

$("#box").myFade(1000);

四、选择建议

如果你愿意，可以告诉我：

• 是 网页动画 / 按钮动画 / 滚动动画？
• 用 jQuery 还是现代前端框架？

我可以直接给你可运行的完整示例。