Web源码笔记Day04：动画与类数组对象操作.pdfVIP

正课:

1.动画API

2.类数组对象操作

3.自定义组件

4.ajax

5.跨域

1.动画API：

1.简单动画:写死的三种动画效果

1.显示隐藏:$elem.show()$elem.hide()$.elem.toggle()

默认没有动画效果，瞬间显示隐藏

原理:.show()和.hide()默认使用disy:block/none实现显示隐藏，所以不支持过渡

如何添加动画效果:添加动画持续时间参数，毫秒数

原理:用js定时器反复修改宽、高、属性模拟过渡效果

2.上滑下滑:slideUp()slideDown()slideToggle()

3.淡入淡出:fadeIn()fadeOut()fadeToggle()

缺点:1.用js程序写死的动画效果，不可。

2.用js程序模拟的动画效果，效率不如css的transition

总结:简单动画API很少使用

2.万能动画:对任意css属性的变化应用动画效果

$elem.animate({

css属性:目标值

//强调:1.只能设置单个数值的属性

//2.不支持颜色过渡和CSS3变换的过渡

//3.也是用js定时器模拟的过渡效果

},持续时间)

排队和并发:

1.排队:多个css属性先后依次变化

如何:先后调用多个动画API，多个动画API是排队执行的

原理:每个元素其实都有一个动画队列

调用动画API不是立刻执行动画的意思，而仅是将动画加入队列中等待执行。

2.并发:多个css属性同时变化

如何:在一个animate中同时定义多个css属性

停止动画:$elem.stop()

问题:默认仅停止当前正在的第一个动画，队列中后续动画依然执行

解决:.stop(true)停止动画，并清空队列！

:animated专门匹配正在动画的元素