jquery之超简单的div显示和隐藏特效demo(分享)


Posted in Javascript onJuly 09, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery_last.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(  function(){});
function hiden(){
$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
}
function slideToggle(){
$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
}
function show(){
$("#divObj").show();//显示,参数说明同上
}
function toggle(){
$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
}
function slide(){
$("#divObj").slideDown();//窗帘效果展开
}
</script>
</head>
<body>
<h3>div里内容的显示隐藏特效</h3>
<input type="button" value="隐藏" onclick="hiden()"/>
 <input type="button" value="显示" onclick="show()"/>
 <input type="button" value="窗帘效果显示2" onclick="slide()"/>
 <input type="button" value="窗帘效果的切换" onclick="slideToggle()"/>
  <input type="button" value="隐藏显示效果切换" onclick="toggle()"/>
<div id="divObj" style="display:none">
        1.测试例子<br/>
        2.测试例子<br/>
        3.测试例子<br/>
        4.测试例子<br/>
        5.测试例子<br/>
        6.测试例子<br/>
        7.测试例子<br/>
        8.测试例子<br/>
        9.测试例子<br/>
        0.测试例子<br/>
    </div>
</body>
</html>
Javascript 相关文章推荐
javascript Math.random()随机数函数
Nov 04 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
全面了解js中的script标签
Jul 04 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
Vue3为什么这么快
Sep 23 Javascript
js实现扫雷源代码
Nov 27 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 #Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 #Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 #Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 #Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 #Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 #Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 #Javascript
You might like
2021年最新CPU天梯图
2021/03/04 数码科技
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
python解析xml模块封装代码
2014/02/07 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python处理CSV与List的转换方法
2018/04/19 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
django2笔记之路由path语法的实现
2019/07/17 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
《维生素c的故事》教学反思
2014/02/18 职场文书
创意广告词
2014/03/17 职场文书
兴趣小组活动总结
2014/05/05 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js
app场景下uniapp的扫码记录
2022/07/23 Java/Android