jQuery.animate-enhanced 插件技术文档

1. 安装指南

要使用 jQuery.animate-enhanced 插件，您需要确保已经将 jQuery 库包含在项目中。该插件兼容 jQuery 1.3.2 至 1.8.0 版本。您可以通过以下方式将插件添加到项目中：

• 直接下载插件的压缩或未压缩版本，并将其包含在 HTML 文件中。

<script src="path/to/jquery.animate-enhanced.js"></script>

• 或者，使用 npm 或其他包管理器安装，然后按照包管理器的说明引入。

npm install jquery-animate-enhanced

<script src="path/to/node_modules/jquery-animate-enhanced/jquery.animate-enhanced.js"></script>

确保在引入 jQuery 库之后引入该插件。

2. 项目的使用说明

该插件扩展了 jQuery 的 $.animate() 方法，使其能够自动检测并使用 CSS3 过渡动画，以提高动画的性能。使用方法与标准的 $.animate() 相同，但提供了几个新的可选参数来控制动画的行为。

使用示例

$(element).animate({
  left: 100,
  opacity: 0.5
}, 500);

上述代码将元素水平移动到左边距离 100 像素的位置，并将透明度设置为 0.5，动画持续时间为 500 毫秒。

新参数

• avoidTransforms: 布尔值，默认为 false。设置为 true 可禁用将 left 和 top 动画转换为 CSS3 transform。
• useTranslate3d: 布尔值，默认由浏览器自动检测。设置为 true 或 false 可强制使用或禁用 3D 变换。
• leaveTransforms: 布尔值，默认为 false。设置为 true 可在动画结束后保留 transform。
• avoidCSSTransitions: 布尔值，默认为 false。设置为 true 可使插件完全失效，使用 jQuery 原生的 animate() 方法。

3. 项目API使用文档

以下是公共 jQuery 对象新增的方法：

• $.toggle3DByDefault(): 切换插件是否默认使用 translate3d。
• $.toggleDisabledByDefault(): 切换插件是否默认禁用。
• $.setDisabledByDefault(value): 显式启用或禁用插件。
• $(e).translation(): 返回元素当前的 X 和 Y 坐标。

4. 项目安装方式

安装方式已在“安装指南”中详细说明。您可以直接下载插件，使用 npm 安装，或通过其他包管理器进行安装。确保遵循正确的引入顺序，即在 jQuery 库之后引入该插件。