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 面向对象之命名空间
May 04 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
JS提交form表单实例分析
Dec 10 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
vue实现淘宝购物车功能
Apr 20 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程序的php代码
2008/04/07 PHP
php 异常处理实现代码
2009/03/10 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
Python3 queue队列模块详细介绍
2018/01/05 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
python单例设计模式实现解析
2020/01/07 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
python3 kubernetes api的使用示例
2021/01/12 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
东方电视购物:东方CJ
2016/10/12 全球购物
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
学校募捐倡议书
2014/05/14 职场文书
校园元旦活动总结
2014/07/09 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2014年林业工作总结
2014/12/05 职场文书
装配车间主任岗位职责
2015/04/08 职场文书