显示与隐藏
- show(speed,callback)
speed:动画执行的时长,单位为毫秒
callback:动画执行完毕后的回调函数
- hide(speed,callback)
speed:动画执行的时长,单位毫秒
callback:动画执行完毕后的回调函数
滑动式动画
- slideUp()和slideDown()
没有无动画版本(底层代码预定义动画执行的时长),改变指定元素的高度,括号里面的参数同样传时长,单位毫秒
淡入淡出动画
- fadeOut()和fadeIn()
括号里的参数接收一个时长,单位为毫秒
动画切换
- fadeToggle()
括号里的参数接收一个时长,单位为毫秒
自定义动画
- animate()方法:自定义动画
1.animate(properties,duration,callback)
properties:表示css的样式属性,设置动画执行结束的样式属性值
duration:表示动画执行的时长,单位为毫秒
callback:表示动画执行完毕后的回调函数
2.animate(properties,options)
properties:表示css的样式属性,设置动画执行结束的样式属性值
options:表示设置动画的相关参数
duration:表示动画执行的时长,单位为毫秒
complete:表示动画执行完毕后的回调函数
queue:布尔值,设置是否添加到动画队列中
- 并发与排队效果
并发效果:就是指多个动画同时执行,多个CSS的样式属性值同时改变,动画多个值综合效果
排队效果:就是指多个动画按照定义的先后顺序执行,多个CSS的样式属性值先后改变
queue:用于控制当前的动画效果是并发还是排队效果
- 停止执行动画
stop()方法没有接收任何参数时:立即停止执行动画
stop(queue)方法的第一个参数
fasle:表示停止当前动画,但队列中的动画继续执行
true:表示停止当前动画,并且清空动画队列
stop(queue,gotoEnd)方法的第二个参数
false:不会做任何处理
true:表示停止当前动画,并且将指定元素设置为动画执行完毕后的样式
- 延迟执行动画,delay()
语法结构如下
$('div').animate({
left:800
},3000).delay(1000).animate({
top:600
},3000);