jQuery动画函数
前端实现动画的技术有哪些? (1)CSS3 Transition (2)CSS3 Keyframes (3)JS 定时器: setInterval 或 setTimeout 修改样式 (jQuery1&2) (4)requestAnimationFrame —— 效率最高 (jQuery3使用) |
注意:所有的jQuery动画函数都会自动排队!
(1)隐藏和显示动画——修改width/height/opacity
//参数为动画执行速度,动画执行完毕后执行的回掉函数
$(..).show(speed, fn) //显示,默认速度为0
$(..).hide(speed, fn) //隐藏,默认速度为0
$(..).toggle(speed, fn) //隐藏显示的切换操作
(2)淡入/淡出动画——修改opacity
$(..).fadeOut(speed,fu ) //淡出
$(..).fadeIn( speed,fn) //淡入
$(..).fadeToggle( speed,fn) //切换
(3)折叠展开/收起动画——修改的height
$(..).slideUp( speed,fn) //收起
$(..).slideDown( speed,fn) //展开
$(..).slideToggle( speed,fn) //切换
(4)万能动画函数——修改任意合法的属性
$(..).animate( {
width: '300%',
height: '30%',
opacity: '0.6',
left: '300px'
} , 动画时间毫秒, fn)
注意:animate函数只能对数值型的属性执行定时器动画(如宽、高、透明度、位置...),
非数值型属性不能执行动画(如display、border-style、text-decoration);默认情况下,不能对颜色相关属性执行动画!