jQuery的4种常见动画效果

jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。jQuery 给我们封装了很多动画效果，其中最为常见的就是显示隐藏、滑动、淡入淡出和自定义动画。下面来看一下这些效果的使用方法。

show([speed,[easing],[fn]])

（1）参数都可以省略， 无动画直接显示。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn:  回调函数，在动画完成时执行的函数，每个元素执行一次。

hide([speed,[easing],[fn]])

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn:  回调函数，在动画完成时执行的函数，每个元素执行一次。

切换语法规范，具体代码如下：

toggle([speed,[easing],[fn]])

切换参数

（1）参数都可以省略， 无动画直接显示。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn:  回调函数，在动画完成时执行的函数，每个元素执行一次。

 建议：平时一般不带参数，直接显示隐藏即可。

2.滑动效果

下滑效果语法规范，具体代码入下：

slideDown([speed,[easing],[fn]])

下滑效果参数

（1）参数都可以省略。

（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn:  回调函数，在动画完成时执行的函数，每个元素执行一次。

上滑效果语法规范，具体代码入下：

slideUp([speed,[easing],[fn]])

上滑效果参数

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn:  回调函数，在动画完成时执行的函数，每个元素执行一次。

事件切换语法格式如下：

hover([over,]out)

（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）

（2）out:鼠标移出元素要触发的函数（相当于mouseleave）

（3）如果只写一个函数，则鼠标经过和离开都会触发它

3.动画队列及其停止排队方法

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
停止排队

stop()

(1）stop() 方法用于停止动画或效果。

(2)  注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

4.淡入淡出效果
淡入效果语法，具体代码如下：

fadeIn([speed,[easing],[fn]])

淡入效果参数

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn:  回调函数，在动画完成时执行的函数，每个元素执行一次。

淡出效果语法规范，具体代码如下：

fadeOut([speed,[easing],[fn]])

单小虎效果参数
（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn:  回调函数，在动画完成时执行的函数，每个元素执行一次。

 淡入淡出切换效果语法规范

fadeToggle([speed,[easing],[fn]])

淡入淡出切换效果参数

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn:  回调函数，在动画完成时执行的函数，每个元素执行一次。

怎样将渐进方式调整到指定的不透明度呢？
可以使用以下代码

fadeTo([[speed],opacity,[easing],[fn]])

效果参数

（1）opacity 透明度必须写，取值 0~1 之间。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn:  回调函数，在动画完成时执行的函数，每个元素执行一次。

5.自定义动画 animate
语法格式

animate(params,[speed],[easing],[fn])

自定义动画参数

（1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn:  回调函数，在动画完成时执行的函数，每个元素执行一次。

猜你喜欢：

jQuery和vue的区别是什么?【前端面试题】

怎么给jQuery扩展插件？【前端面试常问】

Jquery常用的选择器有哪些？用途有什么不同？

类操作是什么意思？jQuery的类操作教程

黑马程序员前端与移动开发培训