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对象的property和prototype是这样一种关系
Mar 24 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 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
php var_export与var_dump 输出的不同
2013/08/09 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
List the Codec Files on a Computer
2007/06/18 Javascript
在html页面中包含共享页面的方法
2008/10/24 Javascript
js GridView 实现自动计算操作代码
2009/03/25 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
Python实现的简单发送邮件脚本分享
2014/11/07 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
python实现按行分割文件
2019/07/22 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
Java软件工程师综合面试题笔试题
2013/09/08 面试题
初三物理教学反思
2014/01/21 职场文书
课内比教学心得体会
2014/09/09 职场文书
技术员岗位职责范本
2015/04/11 职场文书
讲座通知范文
2015/04/23 职场文书
农村党支部承诺书
2015/04/30 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android