# 淡入淡出

URL: https://caijiao.org/jquery/05-effects/02-fade
Source: docs/jquery/05-effects/02-fade.md
Description: 本文讲解 jQuery 中淡入淡出动画的用法，包括 fadeIn、fadeOut、fadeToggle 和 fadeTo，适用于创建平滑的显示与隐藏视觉效果。

淡入淡出是 [jQuery](/jquery/) 中常用的视觉动画方式，用于实现元素的透明渐变效果，提升用户界面表现力。

## 常用淡入淡出方法

### `fadeIn([speed, callback])`

使隐藏元素逐渐显示出来。

```js
$("#box").fadeIn(1000);
```

### `fadeOut([speed, callback])`

使可见元素逐渐隐藏。

```js
$("#box").fadeOut(1000);
```

### `fadeToggle([speed, callback])`

根据当前状态切换淡入淡出。

```js
$("#box").fadeToggle();
```

### `fadeTo(speed, opacity, callback)`

将元素透明度渐变至指定值。

```js
$("#box").fadeTo(1000, 0.3); // 1秒变为30%透明
```

## 示例代码

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