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:回调函数,在动画完成时执行的函数,每个元素执行一次
jQuery的滑动效果以及事件切换
事件切换:hover([over],out)
(1)over:鼠标移动到元素上要触发的函数(相当于mouseenter)
(2)out:鼠标移出元素要触发的函数(相当于mouseleave)
hover 就是鼠标经过和离开的复合写法
如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数
滑动 slideDown(),slideUp(),slideToggle()
下拉滑动 slideDown()
上滑动 slideUp()
滑动切换 slideToggle()
jQuery停止动画排队
动画或效果队列:动画或效果一旦触发就会执行,如果多次触发,就造成多个动画或效果排队执行
stop()
(1)stop()方法用于停止动画或效果
(2)注意:stop()写到动画或者效果的前面,相当于停止结束上一次的动画
jQuery自定义动画animate方法
animate(params,[speed],[easing],[fn])
params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderLeft.其余参数都可以省略
案例1
案例2