jQuery入门第二章（显示隐藏动画）

基本概念

隐藏其实就是 display:none;

显示可以有很多种：display:block flex inline-block，block 最常见。

基础显示隐藏

以上方法传入时间后才有动画动画效果，不传入时间没有动画效果。

淡入淡出显示隐藏

就是透明度的变化。

没有传入时间也有动画效果，默认值是 400 毫秒

滑动显示隐藏

高度的变化

自定义动画

核心方法

.animate( 样式对象, 时间, 回调函数 )

被称为动态的 .css( )

参考代码

// 有动画效果的变化
.animate({ width: '200px', height: '200px' });
// 没有动画效果
.css({ width: '200px', height: '200px' });

动画回调函数

执行时机，动画结束后，自动执行的函数，可以嵌套。

注意事项

驼峰写法

font-size    border-radius   中杆这类样式需要写成驼峰写法     fontSize    borderRadius

动画使用原则

优先使用 CSS3 实现动画效果，CSS3 无法实现的再使用 JS 实现。

动画队列

动画队列概念：我们可以理解为 JQ 的动画是排队执行的，上一个动画结束后，才执行下一个动画。

常见 bug： 鼠标快速移入移出的时候，给同一个元素快速添加了多个动画，鼠标停止移动了，动画效果还在播放。

解决办法：在调用新的动画方法前，添加一个 .stop( ) 清空以前的动画，直接执行新的动画。

.stop()