jQuery入门第二章(显示隐藏动画)

简介: jQuery入门第二章(显示隐藏动画)

基本概念


隐藏其实就是 display:none;


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


基础显示隐藏

20210906210756146.png


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


淡入淡出显示隐藏


就是透明度的变化。


20210906210840958.png


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


滑动显示隐藏


高度的变化


20210906210932611.png


自定义动画


核心方法


.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()


20210906211438852.png


相关文章
|
1天前
|
JavaScript 前端开发 API
【JQuery】基础从零入门操作,简单详细
jQuery下载,引入依赖,JQuery语法、选择器、时间、获取元素、返回CSS、修改属性、添加元素、删除元素、猜数字游戏、表白墙
|
7天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
31 9
|
2月前
|
JavaScript 前端开发 UED
jQuery 动画
【10月更文挑战第8天】
114 55
|
8天前
|
JavaScript 前端开发
jquery输入框键入文字动画特效
这是一款炫酷的jquery输入框键入文字动画特效。该文字特效在用户键入字母时,通过jquery代码来制作文字的动画效果,非常炫酷。
20 0
|
1月前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
24 1
|
3月前
|
JavaScript
jQuery 停止动画
jQuery 停止动画
26 4
|
3月前
|
缓存 JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
36 4
|
3月前
|
JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
50 11
|
2月前
|
JavaScript
Jquery从入门到精通
Jquery从入门到精通
|
3月前
|
JavaScript
jQuery 停止动画
jQuery 停止动画
29 11