jQuery 给我们封装了很多动画效果。

jQuery 动画效果

一、显示隐藏效果

1. 显示语法规范
   show([speed,[easing],[fn]])

2. 显示参数
   （1）参数都可以省略， 无动画直接显示。
   （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
   （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
   （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3. 隐藏语法规范
   hide([speed,[easing],[fn]])

4. 隐藏参数
   （1）参数都可以省略， 无动画直接显示。
   （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
   （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
   （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

5. 切换语法规范
   toggle([speed,[easing],[fn]])

6. 切换参数
   （1）参数都可以省略， 无动画直接显示。
   （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
   （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
   （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
   建议：平时一般不带参数，直接显示隐藏即可。

二、滑动效果

1. 下滑效果语法规范
   slideDown([speed,[easing],[fn]])

2. 下滑效果参数
   （1）参数都可以省略。
   （2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
   （3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
   （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3. 上滑效果语法规范
   slideUp([speed,[easing],[fn]])

4. 上滑效果参数
   （1）参数都可以省略。
   （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
   （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
   （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

5. 滑动切换效果语法规范
   slideToggle([speed,[easing],[fn]])

6. 滑动切换效果参数
   （1）参数都可以省略。
   （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
   （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
   （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

三、淡入淡出效果

1. 淡入效果语法规范
   fadeIn([speed,[easing],[fn]])

2. 淡入效果参数
   （1）参数都可以省略。
   （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
   （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
   （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3. 淡出效果语法规范
   fadeOut([speed,[easing],[fn]])

4. 淡出效果参数
   （1）参数都可以省略。
   （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
   （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
   （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

5. 淡入淡出切换效果语法规范
   fadeToggle([speed,[easing],[fn]])

6. 淡入淡出切换效果参数
   （1）参数都可以省略。
   （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
   （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
   （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

7. 渐进方式调整到指定的不透明度
   fadeTo([[speed],opacity,[easing],[fn]])

8. 效果参数
   （1）opacity 透明度必须写，取值 0~1 之间。
   （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写
   （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
   （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

四、自定义动画 animate

1. 语法
   animate(params,[speed],[easing],[fn])

2. 参数
   （1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
   （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
   （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
   （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

要想页面做动画，
$("document").animate({scrollTop: 0})不受支持，
应选用如下语法：
$("body,html").animate({scrollTop: 0})

五、事件切换

hover([over,]out)

（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
（2）out:鼠标移出元素要触发的函数（相当于mouseleave）
（3）如果只写一个函数，则鼠标经过和离开都会触发它

六、动画队列及其停止排队方法

1. 动画或效果队列
   动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
2. 停止排队
   stop()
   (1）stop() 方法用于停止动画或效果。
   (2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。