jQuery 笔记

2022-07-04  本文已影响0人  霍晓龙2021强化班

三、jQuery 效果

1、显示隐藏效果

(1)显示语法规范

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

(2)显示参数

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

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

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

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

(3)隐藏语法规范

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

(4)隐藏参数

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

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

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

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

(5)切换语法规范

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

(6)隐藏参数

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

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

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

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

2、滑动效果

(1)下滑效果语法规范

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

(2)下滑效果参数

参数都可以省略。

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

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

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

(3)上滑效果语法规范

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

(4)上滑效果参数

参数都可以省略。

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

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

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

(5)切换语法规范

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

(6)隐藏参数

参数都可以省略。

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

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

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

3、事件切换

hover([over,]out)

over : 鼠标移到元素上要触发的函数(相当于 mouseenter )

out : 鼠标移出元素要触发的函数(相当于 mouseleave )

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

(1)动画或效果队列

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

(2)停止排队

stop();

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

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

5、淡入淡出效果

(1)淡入效果语法规范

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

(2)淡入效果参数

参数都可以省略。

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

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

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

(3)淡出效果语法规范

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

(4)淡出效果参数

参数都可以省略。

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

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

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

(5)淡入淡出切换效果语法规范

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

(6)淡入淡出切换效果参数

参数都可以省略。

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

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

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

(7)渐进方式调整到指定的不透明度

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

(8)效果参数

opacity 透明度必须写,取值0~1之间

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

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

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

6、自定义动画 animate

(1)语法

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

(2)参数

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

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

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

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

上一篇 下一篇

猜你喜欢

热点阅读