jQuery效果总结笔记

166 阅读1分钟

jQuery效果有jQuery显示与隐藏效果jQuery的滑动效果以及事件切换jQuery停止动画排队jQuery自定义动画animate方法

jQuery显示与隐藏效果

显示:show([speed,[easing],[fn]])

隐藏:hide([speed,[easing],[fn]])

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

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

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

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

显示隐藏.png

jQuery的滑动效果以及事件切换

事件切换:hover([over],out)

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

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

hover 就是鼠标经过和离开的复合写法

hover.png

如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数

hover复合.png

滑动 slideDown(),slideUp(),slideToggle()

下拉滑动 slideDown()

下拉滑动.png

上滑动 slideUp()

上滑动.png

滑动切换 slideToggle()

滑动切换.png

jQuery停止动画排队

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

stop()

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

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

stop.png

jQuery自定义动画animate方法

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

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

animate.png

案例1

案例2