jQuery教程

jQuery自定义动画

6,440字

27–41 分钟

概览

jQuery自定义动画通过.animate()方法实现，允许创建介于简单显示隐藏与复杂效果之间的过渡动画。核心机制是操作CSS数值属性，配合动画时长、缓动函数和回调函数，实现高度可控的动态效果。本章涵盖.animate()语法详解、动画属性规则、队列管理与控制方法，以及多属性同步动画的实践。

animate()

.animate()是创建jQuery自定义动画的核心方法，通过对CSS属性值的渐变过渡实现动态效果。

语法

.animate( properties [, duration ] [, easing ] [, complete ] )
.animate( properties, options )

参数说明

properties (Object)：一个包含CSS属性及目标值的键值对对象。支持数值型属性如width、height、left、top、opacity等。属性值可以是具体的数值（带单位如’px’、’em’）、相对值（’+=’或’-=’表示相对于当前值增加或减少），或是'hide'、'show'、'toggle'等字符串。
duration (Number|String)：动画执行时间，单位为毫秒，或使用预设字符串'slow'(600ms)、'fast'(200ms)。默认值为400ms。
easing (String)：缓动函数名称，用于控制动画在不同时段的速率。jQuery默认支持'swing'（慢-快-慢）和'linear'（匀速），通过插件可扩展更多效果。
complete (Function)：动画完成时执行的回调函数，无参数。
options (Object)：一组包含动画配置的键值对，可包含上述所有参数，此外还支持queue(是否加入队列，默认为true)、specialEasing(为不同属性指定缓动函数的对象)和step(动画每一步更新后调用的回调函数)等。

示例：基础自定义动画
以下示例展示对一个<div>元素的宽度、高度和不透明度同时执行jQuery自定义动画。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery自定义动画基础示例</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: #4CAF50;
      position: relative;
    }
  </style>
</head>
<body>
  <button id="startAnimation">开始动画</button>
  <div id="box"></div>

  <script>
    $('#startAnimation').on('click', function() {
      $('#box').animate({
        width: '300px',
        height: '300px',
        opacity: 0.5
      }, 1500, 'swing', function() {
        // 动画完成后的回调
        console.log('动画完成');
      });
    });
  </script>
</body>
</html>

动画属性与相对值

.animate()的properties参数支持多种值类型，使其能够灵活定义动画终点。

绝对数值：直接指定目标值，如'200px'、'50%'。对于无单位属性如opacity可直接使用数字，如0.5。
相对值：使用'+=100px'或'-=20px'的形式，表示在当前值基础上增加或减少指定量。这对于创建基于当前状态的连续动画非常有用。
字符串常量：使用'hide'、'show'或'toggle'可以结合元素的预设显示隐藏状态进行动画。例如{height: 'toggle'}会在展开和折叠之间切换。

示例：使用相对值和toggle
本例演示通过相对值持续增加元素宽度，以及使用toggle值切换高度动画。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery自定义动画相对值与toggle示例</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    #box {
      width: 150px;
      height: 100px;
      background-color: #2196F3;
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <button id="btnWidth">增加宽度 (+50px)</button>
  <button id="btnToggleHeight">切换高度 (toggle)</button>
  <div id="box"></div>

  <script>
    $('#btnWidth').on('click', function() {
      $('#box').animate({
        width: '+=50px'
      }, 400);
    });

    $('#btnToggleHeight').on('click', function() {
      $('#box').animate({
        height: 'toggle'
      }, 600);
    });
  </script>
</body>
</html>

动画队列与控制

jQuery动画默认按照调用顺序依次执行，形成队列。理解队列机制是掌控复杂jQuery自定义动画序列的关键。

队列机制：当一个元素上连续调用多个动画方法时，它们不会同时运行，而是加入一个”动画队列”，等待前一个动画完成后再开始。这保证了动画的有序进行。
停止动画：.stop( [clearQueue ] [, jumpToEnd ] )用于停止当前正在运行的动画。clearQueue为true时清除队列中后续未执行的动画；jumpToEnd为true时立即跳到当前动画的最终状态。
延迟执行：.delay( duration [, queueName ] )用于在队列中设置一个延迟，暂停后续动画的执行。
完成动画：.finish( [queue ] )停止当前动画，并清除所有队列，将元素直接移动到所有队列动画的最终状态。
全局控制：jQuery.fx.off设置为true可全局禁用所有动画，元素会直接跳到动画结束状态；jQuery.fx.interval可设置动画的帧率（毫秒），但现代浏览器中通常无需修改。

示例：队列、停止与延迟
本例演示多个动画自然形成队列，以及如何使用.stop()和.delay()进行控制。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery自定义动画队列与控制示例</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    #ball {
      width: 80px;
      height: 80px;
      background-color: #FF5722;
      border-radius: 50%;
      position: relative;
      left: 0;
    }
  </style>
</head>
<body>
  <button id="startSeq">开始队列动画</button>
  <button id="stopNow">停止当前</button>
  <button id="stopClear">停止并清空队列</button>
  <div id="ball"></div>

  <script>
    $('#startSeq').on('click', function() {
      $('#ball')
        .animate({ left: '+=200px' }, 800)
        .delay(500)
        .animate({ width: '120px', height: '120px' }, 600)
        .animate({ left: '-=200px' }, 800)
        .animate({ width: '80px', height: '80px' }, 400);
    });

    $('#stopNow').on('click', function() {
      $('#ball').stop(); // 仅停止当前动画，后续队列仍会执行
    });

    $('#stopClear').on('click', function() {
      $('#ball').stop(true); // 停止当前动画并清空队列
    });
  </script>
</body>
</html>

多属性同步动画

在单个.animate()调用中定义多个属性，这些属性的变化是同步进行的。例如，同时改变width、height和opacity，三者会在同一个时间周期内平滑过渡。

这种同步能力使得创建复杂的视觉变换变得简单，如元素的缩放、位移和透明度变化同时发生。可以通过options参数中的specialEasing对象为每个属性指定不同的缓动函数，以创造更精细的效果。

示例：同步动画与specialEasing
本例演示一个元素在向右移动的同时改变颜色（通过backgroundColor，需要jQuery UI或其他插件支持颜色动画）和宽度，并为不同属性设置不同的缓动效果。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery自定义动画多属性同步示例</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <!-- 引入jQuery UI以支持颜色动画 -->
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
  <style>
    #target {
      width: 150px;
      height: 100px;
      background-color: #9C27B0;
      position: relative;
      left: 0;
    }
  </style>
</head>
<body>
  <button id="animateBtn">执行同步动画</button>
  <div id="target"></div>

  <script>
    $('#animateBtn').on('click', function() {
      $('#target').animate({
        left: '300px',
        width: '250px',
        backgroundColor: '#FFC107' // 需jQuery UI支持
      }, {
        duration: 2000,
        specialEasing: {
          left: 'linear',      // 位移匀速
          width: 'swing',      // 宽度变化使用swing
          backgroundColor: 'linear'
        },
        complete: function() {
          console.log('所有属性同步动画完成');
        }
      });
    });
  </script>
</body>
</html>

动画选项与回调

.animate()的第二种语法形式接受一个options对象，提供了更丰富的配置项。

duration、easing、complete：与第一种语法参数对应。
queue：若设为false，则该动画会立即开始且不进入队列，与当前正在进行的动画并行执行。常用于需要实时反馈的动效。
step：一个在每个动画步骤完成后调用的回调函数。它接收两个参数：now(当前属性的数值)和fx(一个包含动画细节的jQuery.fx对象)。可用于实现更底层的自定义逻辑，例如实时更新文本显示。
progress：每次动画更新时调用的回调，接收动画的Promise参数。
start：动画开始前调用的回调。
done：动画成功完成时调用的回调，与complete类似但属于Promise接口。
fail：动画失败时（例如，停止或未完成）调用的回调。
always：动画无论完成还是停止都会执行的回调。

示例：使用step选项实时更新值
本例在动画过程中，通过step回调实时显示当前left属性的数值。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery自定义动画step选项示例</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    #movingDiv {
      width: 100px;
      height: 100px;
      background-color: #3F51B5;
      position: absolute;
      left: 20px;
    }
    #valueDisplay {
      margin-top: 120px;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <button id="moveBtn">移动元素</button>
  <div id="movingDiv"></div>
  <div id="valueDisplay">当前 left 值: 20px</div>

  <script>
    $('#moveBtn').on('click', function() {
      $('#movingDiv').animate({
        left: '+=300px'
      }, {
        duration: 3000,
        step: function(now, fx) {
          if (fx.prop === 'left') {
            $('#valueDisplay').text('当前 left 值: ' + Math.round(now) + 'px');
          }
        },
        complete: function() {
          $('#valueDisplay').append(' (动画完成)');
        }
      });
    });
  </script>
</body>
</html>

版本变更记录

版本	变更内容
1.0	引入`.animate()`方法，支持基本的数值属性动画。
1.2	添加缓动函数支持，内置`linear`和`swing`。
1.4	扩展`.animate()`的`options`参数，增加`step`、`queue`等回调。
1.8	重构动画模块，引入`jQuery.fx`对象，优化性能。
3.0	动画模块使用`requestAnimationFrame`，显著提升性能和流畅度。
3.2	修复并改进了`.finish()`方法的稳定性。
4.0	移除已弃用的`jQuery.fx.interval`。动画模块进一步优化。

浏览器兼容状态

jQuery动画基于CSS属性和JavaScript定时器实现，其兼容性取决于jQuery核心库的支持。以下为.animate()方法在主流浏览器中的最低支持版本。

浏览器	最低支持版本
桌面端
Chrome	(总是支持) – 与jQuery库版本兼容，建议使用最新版jQuery以获取最佳支持。
Edge	(总是支持) – 所有基于Chromium的Edge版本均支持。
Firefox	(总是支持) – 包括长期支持版(ESR)。
Opera	(总是支持) – 跟随Chromium内核，兼容性良好。
Safari	(总是支持) – 但较旧版本（如macOS 10.12 Sierra上的Safari 10.1）可能需要使用jQuery 3.x。
移动端
Chrome Android	(总是支持) – 随Android版本更新，但建议保持应用WebView为最新。
Firefox for Android	(总是支持) – 更新频繁，动画支持良好。
Opera Android	(总是支持) – 基于Chromium，兼容性同桌面版。
Safari on iOS	iOS 7.0+ – 需使用jQuery 2.x或3.x。对于iOS 6及以下，需使用jQuery 1.12/1.11，但动画基本功能仍然可用。
Samsung Internet	(总是支持) – 基于Chromium，所有现代版本均支持。
WebView Android	随Android版本而异，Android 5.0+的系统WebView支持良好。
WebView on iOS	随iOS版本，iOS 9+的WKWebView兼容性等同于Safari。

简介与入门

jQuery 选择器

DOM操作与遍历

HTML元素操作

动画与特效

事件处理

实用函数

回调、延迟与异步

jQuery Ajax

jQuery 插件

优化与实践

与现代前端开发

综合实战项目

参考手册