目录
jQuery预制动画
显示隐藏动画
上拉下拉动画（高度动画）
淡入淡出动画（透明度动画）
jQuery自定义动画
jQuery停止动画和延迟动画等
jQuery预制动画
jquery的预制动画 就是 jquery提前制定好的动画 动画效果固定 用法也比较简单 显示隐藏动画
hide
用法：jquery元素.hide(动画时长，速度曲线，动画完成回调函数) 作用：在指定的动画时长内 按照指定的速度曲线 完成动画 最后在完成动画后 调动回调函数，hide动画实现的效果是 将指定元素 隐藏起来 说明
动画时长：以ms为单位的数字 不写单位 速度曲线：有两个可选值——swing（先慢后快再慢 默认值）和 linear（匀速） 注意：hide方法中 参数并不是都需要进行传递 唯一需要传递的是 动画时长 show
用法和说明及注意 都同上 作用：show动画执行的是让元素 从隐藏 到显示的动画 toggle
用法和说明及注意 都同上 作用：toggle方法 执行的是切换效果 如果显示 就动画隐藏 如果隐藏 就动画显示 总结：jquery的预制动画的回调函数中 this的值是添加动画的DOM元素 上拉下拉动画（高度动画）
slideUp
用法：jquery元素.slideUp(动画时长，速度曲线，回调函数) 作用：在指定动画时长内 按照指定的速度曲线 实现上拉动画 动画结束后 执行回调函数。
上拉动画就是将添加动画的元素高度逐步减低为0； slideDown
用法：同上 作用：将元素高度 逐步增大 增大到元素原本的高度 slideToggle
用法：同上 作用：如果元素隐藏 就下拉，如果元素显示 就上拉 淡入淡出动画（透明度动画）
fadeOut
用法：jquery元素.fadeOut(动画时长，速度曲线，回调函数) 作用：在指定时长内 按照指定的速度曲线 实现动画 并在动画完成后 调用回调函数
淡出动画就是将添加动画的元素的透明度 逐步减低为0 fadeIn
用法：同上 作用：淡入动画就是将添加动画的元素的透明度 逐步增大为原本透明度 fadeToggle
用法：同上 作用：如果显示 就淡出 如果隐藏 就淡入 fadeTo
用法：jquery元素.fadeTo(动画时长，目标值，速度曲线，回调函数) 作用：在指定时长内 将指定jquery元素的透明度 动画设置到目标值 动画遵循速度曲线 在动画结束后 执行回调函数。
jQuery自定义动画
animate
用法1：jquery元素.animate({要添加动画的样式名1：终点值，样式名2：终点值,...}，动画时长，速度曲线，function(){}) 作用：在指定时长内 按照指定的速度曲线执行动画 将对象中 所有设置的样式都动画到终点值 最后 动画完成后 调动回调函数 用法2：jquery元素.animate({要添加动画的样式名1：终点值，样式名2：终点值,...}，{duration：2000，easing："linear"，complete：function(){}})
duration表示动画时长 easing表示速度曲线 complete表示回调函数 动画队列
当短时间内 计算机接收到 大量的动画任务的时候 一时间执行不完 就需要将动画任务进行排队执行 动画排成的队列 就被称为 动画队列 但是 某些情况下 动画队列 会导致一些我们不想看到的bug animate方法的用法2中 我们可以在第二个实参对象中传入一个属性——queue 来操作动画队列 jquery元素.animate({要添加动画的样式名1：终点值，样式名2：终点值,...}，{duration：2000，easing："linear"，complete：function(){}},queue:true/false);
queue属性的值 是一个布尔值 true/false
true：当前动画 要添加到动画队列中(默认值)
false：当前动画 不添加到动画队列中
如果我们将动画排入动画队列中 动画就会串行执行 按顺序执行
如果我们不将动画排入动画队列中 动画就会并行执行 同步执行
jQuery停止动画和延迟动画等
在我们实际开发中 往往会出现多个动画叠加的问题 (类似于定时器叠加) 这种问题就需要停止动画来解决 停止动画的方法为stop 用法：jquery元素.stop(是否清空当前动画队列，是否立即执行到当前动画的终点)
说明：这两个参数都是布尔值 延迟动画的方法为delay
用法：jquery元素.delay(延迟时间) 作用：延迟指定的时间之后 再执行jquery元素身上的动画 说明：延迟时间 是一个数字 单位为ms 注意：delay是专门用于 延迟执行jquery动画的方法 不能延迟其他代码的执行 因此 如果想延迟 仍需使用延迟定时器
文章链接
发表评论