# 基本动画

URL: https://caijiao.org/jquery/05-effects/01-basic
Source: docs/jquery/05-effects/01-basic.md
Description: 介绍 jQuery 中常用的基本动画方法，如 show、hide、toggle、fadeIn、slideUp 等，帮助开发者实现元素的渐变、滑动和显示隐藏效果。

jQuery 提供了多种便捷的动画方法，用于控制元素的显示、隐藏、淡入淡出、滑动等效果，让页面更具交互性。

## 显示与隐藏

- `show()` — 显示元素
  ```js
  $("#box").show();
  ```

* `hide()` — 隐藏元素

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

* `toggle()` — 显示/隐藏切换

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

## 渐变动画

- `fadeIn()` — 元素淡入
- `fadeOut()` — 元素淡出
- `fadeToggle()` — 淡入淡出切换
- `fadeTo()` — 设置透明度渐变

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

## 滑动动画

- `slideDown()` — 向下滑出元素
- `slideUp()` — 向上滑入隐藏元素
- `slideToggle()` — 滑动切换

  ```js
  $("#box").slideToggle(600);
  ```

## 示例代码

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