jQuery入门第二章(显示隐藏动画)
Posted 海海呐
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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()
上一章:jQuery入门第一章(jQuery初体验)
下一章:jQuery入门第三章(JQ 节点操作)
以上是关于jQuery入门第二章(显示隐藏动画)的主要内容,如果未能解决你的问题,请参考以下文章