jQuery效果
jQuery给我们封装了很多动画效果,最常见的如下:
显示与隐藏:show()、hide()、toggle()
滑动:slideDown()、slideUp()、slideToggle()
淡入淡出:fadeIn()、fadeOut()、fadeToggle()、fadeTo()
自定义动画:animate()
1 显示隐藏效果
1. 语法
show([speed],[easing],[fn])
显示
hide([speed],[easing],[fn])
隐藏
toggle([speed],[easing],[fn])
显示与隐藏来回切换
2. 参数
-
参数都可以省略,无动画直接显示。
-
speed:三种表示速度的字符串(“slow”,“normal”,“fast”) 或表示动画时长的毫秒数(如:1000)
-
easing:用来指定切换效果,默认是"swing" ,可用参数"linear"
-
fn:回调函数,在动画完成时执行的函数
2 滑动效果
1.语法
slideDown([speed],[easing],[fn])
向下滑动
slideDown([speed],[easing],[fn])
向上滑动
slideDown([speed],[easing],[fn])
滑动切换
2. 参数
-
参数都可以省略,无动画直接显示。
-
speed:三种表示速度的字符串(“slow”,“normal”,“fast”) 或表示动画时长的毫秒数(如:1000)
-
easing:用来指定切换效果,默认是"swing" ,可用参数"linear"
-
fn:回调函数,在动画完成时执行的函数
3 事件切换
hover([over],out)
- over:是鼠标移动到元素上要触发的函数(相当于mouseenter) 可以不写此参数
- out:鼠标移出元素要触发的函数(相当于mouseleave)
- 只写一个函数的时候,鼠标移动和鼠标离开都执行此函数
鼠标移入和鼠标移出事件就可以简写为以下代码:
$("button").hover(function(){
$("div").slidetoggle();
})
4 动画队列及其停止排队方法
1. 动画或效果队列
动画或效果一旦触发就会执行,如果多次触发,就造成多个动画或效果排队执行。
2. 停止排队
stop()
- stop()方法用于停止动画或效果
- 注意:stop()写到动画或者效果的前面,相当于结束上一次的动画
$("button").hover(function(){
$("div").stop().slidetoggle();
})
5 淡入淡出效果
1. 语法
fadeIn([speed],[easing],[fn])
淡入
fadeOut([speed],[easing],[fn])
淡出
fadeToggele([speed],[easing],[fn])
淡入淡出切换
fadeTo(speed,opacity,[easing],[fn])
渐进方式调整到指定的不透明度(注:speed和opacity为必选参数)
2. 参数
-
无特殊说明参数都可以省略,无动画直接显示。
-
speed:三种表示速度的字符串(“slow”,“normal”,“fast”) 或表示动画时长的毫秒数(如:1000)
-
easing:用来指定切换效果,默认是"swing" ,可用参数"linear"
-
fn:回调函数,在动画完成时执行的函数
-
opacity:透明度 必须写,取值0~1之间。
6 自定义动画animata
1. 语法
animate(params,[speed],[easing],[fn])
2. 参数
- params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法,如:borderLeft,其余参数都可以省略
$("button").click(function() {
$("div").animate({
left:200,
top:300,
opacity:.5,
width:"500px"
},500)
})