首页技术文章正文

jQuery的4种常见动画效果

更新时间:2021-10-21 来源:黑马程序员 浏览量:

IT培训班


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

动画效果.png

1.显示隐藏效果

1634797364167_1显示隐藏效果 Wrter的子类.png

show([speed,[easing],[fn]])
 显示参数

(1)参数都可以省略, 无动画直接显示。

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

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

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

隐藏语法规范,具体代码如下:
hide([speed,[easing],[fn]])
隐藏参数
(1)参数都可以省略, 无动画直接显示。

(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.滑动效果

1634796632002_简洁版下拉滑动菜单.png

下滑效果语法规范,具体代码入下:

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的类操作教程

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

分享到:
在线咨询 我要报名
和我们在线交谈!