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 相关文章推荐
jquery div 居中技巧应用介绍
Nov 24 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
RequireJS使用注意细节
May 15 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 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读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
限制复选框的最大可选数
2006/07/01 Javascript
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
JS画线(实例代码)
2013/11/20 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
python中list列表的高级函数
2016/05/17 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
python实现年会抽奖程序
2019/01/22 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
酒店保安员岗位职责
2014/01/31 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
电子工程求职信
2014/07/17 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
基层党支部承诺书
2015/04/30 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
Python中super().__init__()测试以及理解
2021/12/06 Python
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android