基本概念

隐藏其实就是 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入门第二章（显示隐藏动画）相关推荐

jQuery 入门教程(5): 显示/隐藏内容
2019独角兽企业重金招聘Python工程师标准>>> jQuery的hide()和show()可以用来显示和隐藏内容.比如下面的例子:jQuery的hide()和show() 可以 ...
jQuery入门第一章（jQuery初体验）
JQ 基本概念 jQuery 其实就是别的团队封装好的一个 JS 文件. 常见错误没有引入 jQuery 文件,引入失败,请检查 jquery.js 文件的路径. JQ 对象和 DOM 对象互相转 ...
JQuery 渐变显示隐藏动画 ( fadeIn(),fadeOut(),fadeTo() )
$('#div1').fadeIn(1000); //渐变显示.1000毫秒,表示动画显示过程时间. $('#div1').fadeOut(1000); //渐变隐藏 $('#div1').fad ...
webrtc 入门第二章音视频录制
webrtc 入门第二章音视频录制一.介绍 1.媒体录制原理在很多场景中回放音视频资源的需求是非常重要的例如会议,直播授课等.任何媒体形式的表情都可进行录制,如 ,,等.其中内容更加自由用户 ...
jQuery的几种显示隐藏方法
jQuery显示隐藏方法 hide()方法元素隐藏,隐藏的前提必须是元素display:block: show()方法元素显示,显示的前提必须是元素display:none; toggle()方法 ...
WPF编程基础入门 ——— 第二章 XAML
XAML 简述 XAML(eXtensible Application Markup Language,可扩展应用程序标记语言)是微软公司创建的一种新的描述性语言,用于搭建应用程序用户界面.XAML实 ...
html密码框输入内容隐藏,jQuery输入框密码的显示隐藏【代码分享】
效果图: 代码如下: jQuery输入框密码显示隐藏代码 @font-face {font-family: "iconfont"; src: url('iconfont.eot') ...
Java基础入门第二章
大二学的java,一个假期过去,学的差不多都忘光了,在这里再重学一遍,也算不上重学吧,相当于复习吧.第一章讲的是jdk及开发工具的安装,这里就不多赘述了,废话不多说,我们直接从第二章开始. 2.1Ja ...
TYD深度学习入门第二章
目录课时9 梯度下降通俗解释课时10 参数更新的方法课时12 反向传播课时13 神经网络整体框架课时14 神经网络结构细节课时15 神经元个数对结果的影响课时16 正则化与激活函数课时 ...
jQuery 使用slideToggle()滑动显示隐藏
slideToggle() 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数. 这个动画效果只调整元素的高度,可以使匹配的元素以"滑动"的方式隐藏或显示 ...

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