jQuery animate()：编织属于你自己的自定义动画-代码号

如果说 slideUp() 和 fadeOut() 这类现成方法是jQuery提供给你的“预制菜”，那 animate() 就是一套开放式的“手工厨具”。多数时候，你需要的动画并不仅仅是简单的滑动或淡入淡出，而是希望一个元素能随心所欲地改变位置、尺寸、透明度，甚至组合变化。这时候，animate() 就成为了你手中自由度拉满的画笔。

它的核心思想很直白：你告诉它“最终状态是什么样”，它负责帮你从当前状态平滑过渡过去。

语法骨架：三个核心零件

$(selector).animate({params}, speed, callback);

把这三个零件拆开揉碎，才能真正用好它：

{params}：这是一个必不可少的花括号对象。里面装着你希望发生变化的CSS属性名和对应的目标值。注意，属性名必须使用驼峰式写法（camelCase），比如 marginLeft，不能用连字符的 margin-left。
speed：动画时长，同样是熟悉的 "slow"、"fast" 或具体的毫秒值。我个人的习惯是，当动画涉及多个属性同步变化时，时长通常给足600-800毫秒，这样视觉上能有足够的空间去感知每一个维度的变化。
callback：和之前一样，动画完成后触发的函数。一个实用的场景是，当多个元素需要按顺序依次动起来时，可以利用回调来串连，避免动画扎堆，让页面看起来有条不紊。

示例一：理解移动的本质（前置条件有多重要）

官方给的第一个例子，是一个小方块向右平移到 left: 450px 的位置。代码很简单，但这里埋着一个无数新手都踩过的坑。

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                // 让div的left属性值变化到450px
                $("div").animate({left: '450px'});
            });
        });
    </script>
</head>
<body>
    <button>开始移动</button>
    <p>一个简单的位移动画：</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

如果你运行后发现方块纹丝不动，别怀疑代码，先检查那个绿色方块是否设置了 position 属性且不能是 static。HTML元素的默认定位就是 static，在这种状态下，left、right、top、bottom 这四个偏移属性对它是无效的，你怎么调它都无动于衷。所以，想让东西动起来，必须先把它的 position 设置为 relative、absolute 或 fixed。这是本节课程的第一个关键点，也是排查动画失效问题时首要想到的排查方向。

示例二：多属性并行，动画才有“肉”

单个属性变化往往显得单薄。真正的动画质感，源于多个属性的同步作用。下面的代码让一个深色方块在向右移动的同时，放大尺寸并变成半透明。

<button>同步动画</button>
<div style="background:#125f21;height:100px;width:100px;position:absolute;"></div>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left: '250px',      // 向右走
            opacity: '0.5',     // 变朦胧
            height: '150px',    // 变高
            width: '150px'      // 变宽
        });
    });
});
</script>

你会发现，这四个变化是融合在一起的，没有先后之分，整体感觉非常流畅。这就是 animate() 的魅力——它处理多个动画属性时，采用的是并行机制，所有属性共享同一个时长，一同启程，一同抵达。这种体验，是你自己用一堆计时器去拼凑动画时所难以比拟的。

示例三：相对值，让动画“活在当下”

有时候，你并不想让元素移动到一个绝对的位置，而是希望它在当前位置的基础上，再移动一段距离，或者说，每次点击都让尺寸再大一圈。这时候，就得让 += 和 -= 操作符登场了。

<button>增量动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left: '250px',       // 绝对位置
            height: '+=150px',   // 在现有高度上增加150px
            width: '+=150px'     // 在现有宽度上增加150px
        });
    });
});
</script>

这个写法在处理连续交互时非常实用。想象一个调节音量的滑条，每次点击音量加一格，或者一个可以反复展开的导航菜单，使用相对值就能让动画逻辑只关心“变化量”，而不用去计算“最终是多少”。这大大降低了代码与现实世界交互的复杂度。

示例四：预定义值，切换状态的捷径

animate() 还支持你把某个属性值直接设定为 "show", "hide" 或 "toggle"。这听起来和 slideToggle 有点像，但它应用在单个属性上时，玩法就多了。

<button>切换高度</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            height: 'toggle'  // 在高度的“显示”与“隐藏”间平滑切换
        });
    });
});
</script>

这里只让 height 进行 toggle 操作而 width 保持不变，就会产生一种从方块到线条的有趣压缩效果。这种“部分属性切换”的思路，能创造出比整体 slideToggle 更细腻的交互反馈。

示例五：色彩动画，拓展视觉维度

如果你尝试直接用 animate() 去改变 backgroundColor，会发现它无动于衷。这是因为核心的jQuery库并未包含彩色动画引擎。要做到这一点，需要引入 jQuery UI 这个扩展库。它极大地丰富了 animate() 能处理的属性范围。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <style>
    #colorBox { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
  </style>
  <script>
  $(function() {
    var isLarge = true;
    $( "#toggleColorBtn" ).click(function() {
      if ( isLarge ) {
        $( "#colorBox" ).animate({
          backgroundColor: "#aa0000",
          color: "#fff",
          width: 500
        }, 1000 );
      } else {
        $( "#colorBox" ).animate({
          backgroundColor: "#fff",
          color: "#000",
          width: 240
        }, 1000 );
      }
      isLarge = !isLarge;
    });
  });
  </script>
</head>
<body>

<div id="colorBox">
  <h3>色彩动画</h3>
  <p>通过jQuery UI的支持，背景色和文字色都能平滑过渡。</p>
</div>
<button id="toggleColorBtn">切换效果</button>

</body>
</html>

这个例子展示了一个双向切换的彩色动画。点击按钮，方块会扩展变宽，同时背景转为深红色、文字变白；再次点击，则优雅地还原。注意，这里引入的 jQuery UI 库，不仅仅能做色彩动画，它提供的 easing 缓动函数种类也远比核心库多，像 easeInOutBounce 这类更有弹性的效果，都能让动画显得活泼不少。

本节课程知识要点

定位是动画地基：执行任何涉及偏移属性（left， top 等）的动画前，务必确认目标元素的 position 已被设为 relative， absolute 或 fixed，否则动画将静默失效。
并行处理机制：animate() 中传递的多个CSS属性，会在同一个 speed 时长内同步完成过渡，营造流畅的复合动画效果。
相对值优先场景：当需要实现“在现有基础上增减”的连续动画时，使用 += 和 -= 运算符，可以有效避免维护和计算绝对位置带来的代码负担。
扩展色彩能力：核心jQuery库的 animate() 不支持颜色值变化，必须加载 jQuery UI 扩展库，才能实现背景色、前景色等视觉属性的平滑过渡。
动画串连思路：利用 callback 回调函数，可以将多个 animate() 调用连接起来，形成有序的、步骤清晰的链式动画序列，避免混乱。

本文标签：

jQuery animate()：编织属于你自己的自定义动画