JQuery效果
常见的动画效果:动画或效果一旦触发就会执行,如果触发多次,就造成多个动画或效果排队执行。但可以停止动画排队:stop()
显示隐藏 | 滑入滑出 | 淡入淡出 | 自定义动画 |
---|---|---|---|
show() | slideDown() | fadein() | animate() |
hide() | slideUp() | fadeOut() | |
toggle() | slideToggle() | fadeToggle() | |
fadeTo()××× | |||
[speed,[easing],[fn] | [speed,[easing],[fn] | [speed,[easing],[fn] | [params,speed,[easing],[fn] |
显示语法:show([speed,[easing],[fn] )
参数:都可以省略,无动画直接显示。
speed:三种预订速度之一的字符串(“slow”, “noemal”,“fast”)或者表示动画时长的毫秒数值(1000)
easing:(Optional)用来指定切换效果,默认“swing”,可选“linear”。
fn:回调函数,在动画完成时执行的函数,且每个元素执行一次。
隐藏语法:hide( [speed,[easing],[fn] )
同上略…
切换语法:toggle( [speed,[easing],[fn])
同上略…注:没特殊情况,则不带参数,直接显示隐藏即可
×××:参数:opacity 透明度必须写,取值0~1之间。speed:必须写
自定义动画:模拟上面所有动画!!!
语法:animate(params, [speed],[easing],[fn])
params:更改样式属性则以对象形式传递,必须写。属性名可以不带引号,复合属性则需采用驼峰命名法
停止动画排队:stop()方法用于停止动画或效果。须写到动画或效果前面,相当于停止结束上一次动画。
也就是说每次使用动画前,先调用stop()在调用动画。
事件的切换:hover([over], out)类似css中伪类 :hover
over:鼠标移到元素上触发的函数(相当于mouseenter)
out:鼠标移出元素上触发的函数(相当于mouseleave)