Jquery之动画
jquery动画部分自己写一写demo练习一下会有更好的理解。
我自己也是写了几个练手,可以到github仓库获取:https://github.com/qiuqiu2945/jquery
jquery 动画
隐藏与显示
- hide(ms,callback)——隐藏
- show()——显示
- toggle()——隐藏或者显示
- 可以带一个整数参数,表示动画的时间;callback参数表示回调函数
- 动画效果是向左上角收缩或打开的。
淡入淡出
- fadeIn(ms,callback)——淡入
- fadeOut()——淡出
- fadeToggle()——淡入/淡出
- fadeTo(ms, 透明度)——设置透明度
- 1、2、3、4都可以带毫秒参数,表示动画执行时间;都有最后一个参数callback回调函数,在动画之后之后调用。(这两个参数都是可以省略的)
- 4 第二个参数为 0-1,表示透明度
滑动
- slideDown()——元素下滑显示
- slideUp()——元素上滑隐藏
- slideToggle()——下滑/上滑
- 第一个参数为时间
- 第二个参数为回调
animate
.animate(object,ms,style,callback)
-
object 是一个包含样式变化参数的对象,例如:
{width:"200",height:"100",left:"100",opacity:"0.5"}
,
表示将指定的元素将变化为对象内指定的样式。Note:
- 样式名字需写为驼峰型
- 不能操作所有的样式
- 样式的变化可以是表达式:+=100
- 样式值还可以是动画,例如:toggle
-
ms 为动画执行时间
-
style 为动画执行效果:"linear" / "swing",线性或曲线型变化
-
callback 为动画回调
delay(ms)
延迟下一个动画执行时间
清除/停止动画
clearQueue()
清除未执行的动画。调用之后,执行完当前动画就不再执行了。
- 可以接收动画名字作为参数,清除这个指定的动画
finish()
调用后,当前的元素立即变成动画执行完毕的状态
stop()
停止当前元素正在执行的动画