简化版动画函数
显示/隐藏: $(...).show(); $(...).hide(); $(...).toggle()
无参数的show()/hide()使用的是display属性瞬间隐藏和显示
动画
**参数speed**
1. 三档: fast normal slow
2. 用毫秒数自定义动画时长
**动画的速度变化**
easing: linear swing
**伸缩**
slideUp() slideDown() slideToggle()
**淡入淡出**
fadeIn() fadeOut() fadeToggle()
问题:效果受局限
万能动画函数 animate()
animate()可对数值类型的CSS样式执行定时器动画,包括 宽高,位置,透明度,边框宽度,字体大小,注意,不能对非数值类型属性做动画,比如 颜色,背景图片,字体,display
$(...).animate(params,speed,easing,fn)
其中:
params是所有变化的css属性的目标值: 比如: {css属性1: 值1, css属性2:值2,...},注意 css属性名要去横线变驼峰,值要加单位
speed: 动画持续时间/速度
easing: 速度变化效果
fn: 动画结束后,自动调用的回调函数
动画中的排队和并发
排队: 多个动画顺序,先后执行
$(...).animate({属性1:值1,...},ms).animate({属性2:值2,...})
先对属性1执行动画效果,再对属性2执行动画效果
并发: 多个动画同时执行
$(...).animate({属性1:值1,属性2:值2},ms)
同时修改属性1和属性2
网友评论