携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情
本期开始我们继续复盘jQuery语法
- animate（）方法
- 作用：执行CSS属性集的自定义动画
- 语法：$(selector).animate(style,speed,easing,callback)
- 参数1：CSS的属性名和运动结束位置的属性值的集合
- 参数2：可选，规定动画的速度，默认是“normal”，其他值：“slow”、“normal”、“fast”，数字格式，单位为毫秒
- 参数3：可选，规定在不同的动画点中设置动画速度的easing函数，值包含swing和linear
- 参数4：可选，animate函数执行完之后，要执行的函数
- 注意：其他的运动方法比如slideUp（）等，也有参数3和参数4
- 动画排队（制作呼吸效果、遮盖效果）
- 同一个元素对象身上，如果定义了多个动画，动画会排队等待执行
- 如果是不同的元素对象都有动画，不会出现排队机制
- 如果是其他非运动的代码，也不会等待运动完成
- 之前学习的自带动画的显示隐藏方法，如果设置给同一个元素，也有动画排队
- 动画延迟
- delay：延迟的意思
- 将delay（）设置在某个运动方法之前，表示后面的运动要在规定的时间之后再执行，有延迟运动的效果
- 参数：时间的数值，表示延迟的时间
- 除了animate 方法之外，其他的运动方法也有延迟效果
- stop（）方法
- 作用：设置元素对象身上的排队的动画以何种方式进行停止
- 有两个参数，都是布尔值
- 参数1：设置是否清空后面的动画排队，如果是true表示清空，如果是false表示不清空只停止当前的一个动画
- 参数2：设置当前动画是否立即完成，如果是true表示立即完成，对象会立刻走到结束位置，如果是false表示不完成当前动画，立即停止在当前位置
- 实际工作中，一般要求会清空后面的动画，当前动画要停止在当前的位置（true，false）
- 默认情况下，不传参数时，默认为false，所以可以直接写stop（true）
- 动画排队问题
- 如果将开启运动的程序放在一个事件函数中，事件多次被触发，会执行多次函数，就会在一个元素身上添加了多个动画，会进行动画排队
- 需要去清除排队的动画，进行防骚扰操作
- 方法1：stop（true）方法：在每一次新的运动开始之前，去停止之前所有的动画排队
- 方法2：
- 利用函数节流方法，如果元素在运动，直接return，不要执行后面的代码
- 每个jQuery对象，都能调用一个is（）方法，作用是显示元素对象的某种状态
- 如果参数位置是is（“：animated”），返回值是布尔值，true表示正在运动，false表示没有运动
