js进阶 13-1 jquery动画中的显示隐藏函数有哪些
js进阶 13-1 jquery动画中的显示隐藏函数有哪些
一、总结
一句话总结:show(),hide(),toggle(),这三个。
1、jquery动画中显示隐藏效果函数有哪些?
show()
hide()
toggle()
2、显示隐藏效果三个函数中参数中的函数参数怎么使用?
其实是动画完成执行的函数
语法:$(selector).show([speed,[easing],[fn]])
fn:在动画完成执行的函数,每个元素执行一次。
29 $('div').hide(500,function(){
30 alert('动画结束')
31 })
3、$(selector).show([speed,[easing],[fn]])这句话中的三个参数的执行情况是怎么样的?
a、如果没有参数,那就是没有参数
b、如果有参数,第一个参数必须是speed
c、speed的后两个参数easing和fn的地位是一样的,如果同时出现,easing在前fn在后,如果不同时出现,当后两个参数只出现fn的时候,fn前面不需要加东西
29 $('div').hide(500,function(){
30 alert('动画结束')
31 })
二、jquery动画中的显示隐藏函数有哪些
1、相关知识
显示和隐藏
控制元素的的显示和隐藏是最基本的动画技术。
- show()显示被选的元素
语法:$(selector).show([speed,[easing],[fn]])
- hide()隐藏被选的元素
语法:$(selector).hide([speed,[easing],[fn]])
- toggle()对被选元素进行隐藏和显示的切换
语法:$(selector).toggle(speed,callback,switch
- 参数说明:
1.speed:三种预定速度之一的字符串("slow","normal",or"fast")或表示动画时长的毫秒数值(如:1000
2. easing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear"
3. fn:在动画完成执行的函数,每个元素执行一次。
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
div{width: 150px;height: 150px;border: 1px solid green;display: none;}
</style>
</style>
</head>
<body>
<div id="div1"></div><div id="div2"></div><div id="div3"></div>
<input id="btn1" type="button" value="显示">
<input id="btn2" type="button" value="隐藏">
<input id="btn3" type="button" value="切换">
</body>
<script>
$(function(){
$('#btn1').click(function(){
//"speed参数:normal(=400),fast(=200),slow(=600)。
$('#div1').show('slow')
$('#div2').show(1000)
$('#div3').show('fast')
})
$('#btn2').click(function(){
$('div').hide(500,function(){
alert('动画结束')
})
})
$('#btn3').click(function(){
$('div').toggle(1000)
}) })
</script>
</html>
js进阶 13-1 jquery动画中的显示隐藏函数有哪些的更多相关文章
- js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- js进阶 13-11/12 jquery如何实现折叠导航
js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些?
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- jQuery事件-div的显示隐藏及鼠标的移入移出
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 出乎意料的else语句
在python中你可能时不时不碰到else语句用在while和for循环中,请不要吃惊,先看看它的作用吧! 实际上在循环语句中,else子句仅仅会在循环完毕后运行.即跳出循环的操作.如break,同一 ...
- 解决QML开发中ComboBox中一个已选择项没有清除的问题
解决QML开发中ComboBox中一个已选择项没有清除的问题 近期使用QML开发一个项目.须要使用ComboBox进行显示.当进行一个操作时,须要向ComboBox加入一个元素,当进行另外一个操作时. ...
- 小贝_redis高级应用-安全性
redis高级应用-安全性 一.为什么redis须要安全性 二.设置redis验证password 三.验证 一.为什么redis须要安全性 1.redis作为数据的存储介质.假设无法保证redi ...
- button按钮怎么实现超链接
button按钮怎么实现超链接 一.总结 1.我的按钮实现超链接是通过button内嵌a标签来实现的 <button class="am-btn am-btn-default am-b ...
- Spring 配置自动扫描原理说明
Spring利用IOC容器将所有的bean进行有秩序的管理维护,而实际项目中不可能在xml文件中创建bean,而是利用了Spring的组件自动扫描机制,通过在classpath自动扫描的方式把组件纳入 ...
- Impala的优缺点
不多说,上干货! 优点: 支持SQL查询,快速查询大数据. 可以对已有数据进行查询,减少数据的加载,转换. 多种存储格式可以选择(Parquet, Text, Avro, RCFile, Sequee ...
- 兼容MIUI5和MIUI6的开启悬浮窗设置界面
前一段时间项目中需要对MIUI的悬浮窗开启设置界面进行了引导和跳转,MIUI6中又改变了开启悬浮窗设置的位置,在苦苦寻觅之后,找到了解决的方法,贴出来以方便大家参考和使用. @Override pub ...
- vue脚手架3.0的搭建
一.安装node 打开cmd输入node -v查看是否安装成功 显示node版本号表示安装成功,显示‘node’不是内部或外部命令表示未安装node.node安装地址:http://nodejs.cn ...
- python自学群里遇到的小题汇总
题目一: 请使在3秒内计算出一组的数据,偶数在奇数前(注意不使用for while等循环的方法)格式如下1,2,3,4,5,6,7,8,9,10输出结果是2,1,4,3,6,5,8,7,10,9 解决 ...
- groupmod---更改群组识别码或名称
groupmod命令用于更改群组识别码或名称. 需要更改群组的识别码或名称时,可用groupmod指令来完成这项工作. 语法 groupmod [-g <群组识别码> <-o> ...