一、jquery中的动画
1、标准动画
- show()
- hide()
- toggle()
2、折叠动画
- slideDown()
- slideUp()
- slideToggle()
3、渐显动画
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
4、综合动画
- animate
5、停止动画
- stop
- finish
二、标准动画
1、show()
show() 显示隐藏的匹配元素
如果这个元素是可见的,这个方法不会改变任何东西,无论这个元素是通过hide()方法隐藏的还是在css里面设置了display:none,这个方法都有效
语法:show(speed,easing,fn)
- speed:三种预定速度的字符串(slow,normal,fast)或者表示动画时长的毫秒数值(如:2000),Number/String
- easing:(optional 可选参数) 用来指定运动效果,默认是"swing",可选参数"linear",String
- fn:(optional 可选参数) 在动画完成时执行的函数,每个元素执行一次, Function
三种预定速度的字符串对应的毫秒数值
slow | normal | fast |
600 | 400 | 200 |
例:让隐藏的div用2秒时间匀速显示出来,完成之后执行一个反馈
$('div').show(2000,"linear",function(){
$(this).html("动画完成")
})
2、hide()
hide() 隐藏显示的元素
如果元素是隐藏的,这个方法不会改变任何东西。隐藏的元素相当于设置了display: none,隐藏且不占位
语法:hide(speed,easing,fn)
例:让隐藏的div用2s时间匀速隐藏
$('div').hide(2000,"linear");
3、toggle()
toggle() 切换
如果元素是隐藏的,切换为可见,如果元素是可见的,切换为隐藏
语法:toggle(speed,easing,fn)
三、折叠动画
1、slideDown()
slideDown() 通过高度变化(向下增大)来动态显示匹配的所有元素,在动画完成后可选地触发一个回调函数
语法:slideDown(speed,easing,fn)
2、slideUp()
slideUp() 通过高度变化(向上减小)来动态隐藏匹配的所有元素,在动画完成后可选地触发一个回调函数
语法: slideUp(speed,easing,fn)
3、slideToggle()
slideToggle() 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数
语法:slideToggle(speed,easing,fn)
四、渐显动画
1、fadeIn()
fadeIn() 通过透明度的变化实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的透明度,也就是说所有匹配元素的宽度和高度不会发生变化
语法:fadeIn(speed,easing,fn)
2、fadeOut()
fadeOut() 通过透明度的变化实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的透明度,也就是说所有匹配元素的宽度和高度不会发生变化
语法:fadeOut(speed,easing,fn)
3、fadeToggle()
fadeToggle() 通过透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的透明度,也就是说所有匹配元素的宽度和高度不会发生变化
语法:fadeToggle(speed,easing,fn)
4、fadeTo()
fadeTo() 将所有匹配元素的透明度以渐进方式调整到指定的透明度,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的透明度,也就是说所有匹配元素的宽度和高度不会发生变化
语法:fadeTo(speed,opacity,easing,fn)
- opacity:一个0-1之间表示透明度的数字 Number类型
五、综合动画
animate() 用于创建自定义动画的函数
-
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用驼峰式形式,比如用marginLeft代替margin-left.
-
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
-
在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 “+=” 或 “-=” 来让元素做相对运动。
-
jQuery 1.8中,当你使用CSS属性在css()或animate()中,我们将根据浏览器自动加上前缀(在适当的时候),比如(“user-select”, “none”); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".
语法:animate(params,speed,easing,fn)
- params 一组包含作为动画属性和终值的样式属性和及其值的集合,Object类型
例1:点击按钮后div元素的几个不同属性一同变化
$('button').click(function(e){
$('div').animate({
width: "50px",
height: "50px",
marginLeft: "300px"
},2000,"linear")
})
例2:可以设置css属性的值为’show’/‘hide’/‘toggle’,来实现对应属性的显示/隐藏/切换效果
$('button').click(function(e){
$('div').animate({
width: "toggle",
opacity: "toggle"
},2000,"linear")
})
六、停止动画
1、stop()
stop() 停止所有在指定元素上正在运行的动画
运动到哪个位置就停止在哪个位置
2、finish()
finish() 停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画
当 .finish()触发时,立即停止正在进行的动画,不管此时运动的位置,瞬间到达运动完成的位置
七、延时函数
delay(duration) 设置一个延时来推迟执行队列中之后的项目。
- duration 延迟时间,单位毫秒,整数型
例:在.slideUp() 和 .fadeIn()之间延时800毫秒
$('button').click(function(e){
$('div').slideUp(1000).delay(1000).fadeIn(1000)
})