1.基础
1.1 hide()
方法描述：隐藏元素。
需求描述：创建一个显示div，然后隐藏该元素
.box { width: 200px; height: 200px; background: coral; display: block; }
<div class="box"></div>
$('.box').hide();
1.2 show()
方法描述：显示元素。
需求描述：创建一个隐藏div，然后显示该元素
.box { width: 200px; height: 200px; background: coral; display: none; }
$('.box').show();
1.3 toggle()
方法描述：如果隐藏就设置为显示，如果显示就设置为隐藏。
需求描述：创建一个按钮，控制div显示和隐藏
.box { width: 200px; height: 200px; background: coral; display: block; }
$('button').click(function () { $('.box').toggle(); });
2 渐变
2.1 fadeIn()
方法描述：通过淡入的方式显示匹配元素。
需求描述：创建一个按钮，控制div缓慢淡入
.box { width: 200px; height: 200px; background: coral; display: none; }
$('button').click(function () { $('.box').fadeIn('slow'); });
2.2 fadeOut()
方法描述：通过淡出的方式隐藏匹配元素。
需求描述：创建一个按钮，控制div缓慢淡出
.box { width: 200px; height: 200px; background: coral; display: block; }
$('button').click(function () { $('.box').fadeOut('slow'); });
3.3 fadeToggle()
方法描述：用淡入淡出动画显示或隐藏一个匹配元素。
需求描述：创建一个按钮，控制div淡入和淡出
.box { width: 200px; height: 200px; background: coral; display: block; }
$('button').click(function () { $('.box').fadeToggle('slow'); });
3.滑动
3.1 slideDown()
方法描述：用滑动动画显示一个匹配元素。
需求描述：创建一个按钮，控制div滑动显示
.box { width: 200px; height: 200px; background: coral; display: none; }
<button>滑动显示</button> <div class="box"></div>
$('button').click(function () { $('.box').slideDown(); });
3.2 slideUp()
方法描述：用滑动动画隐藏一个匹配元素。
需求描述：创建一个按钮，控制div滑动隐藏
.box { width: 200px; height: 200px; background: coral; display: block; }
$('button').click(function () { $('.box').slideUp(); });
3.3 slideToggle()
方法描述：用滑动动画显示或隐藏一个匹配元素。
需求描述：创建一个按钮，控制div滑动显示和滑动隐藏
.box { width: 200px; height: 200px; background: coral; display: block; }
$('button').click(function () { $('.box').slideToggle(); });
3.6 自定义
animate()
方法描述：根据一组 CSS 属性，执行自定义动画，并且支持链式调用。
需求描述：创建一个div，默认div宽高100px，背景颜色为黑色，先让div宽度变为200px，再让div高度变为200px
width: 100px; height: 100px; background: black; }
<button>自定义动画</button> <div class="box"></div>
$('.box') .animate({ width: '200' }) .animate({ height: '200', });
