# 自定义动画

URL: https://caijiao.org/jquery/05-effects/04-animate
Source: docs/jquery/05-effects/04-animate.md
Description: 本文讲解如何使用 jQuery 的 animate 方法实现自定义动画效果，包括属性变化、动画时长与缓动函数设置，让开发者自由控制元素动画。

除了基本的淡入淡出和滑动效果，[jQuery](/jquery/) 还提供 `animate()` 方法，用于自定义元素属性变化的动画过程。

## animate 方法语法

```js
$(selector).animate(properties, duration, easing, callback);
```

- `properties`：要改变的 CSS 属性对象
- `duration`：动画持续时间（如 `"slow"`、`"fast"` 或毫秒数）
- `easing`：缓动函数（如 `"swing"` 或 `"linear"`）
- `callback`：动画完成后执行的函数

## 支持动画的属性示例

- `width`、`height`
- `opacity`
- `margin`、`padding`
- `left`、`top`（需设置定位）

## 示例代码

[在线代码演示](/jquery/demos/17.html)