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 利用Cookie记录用户登录信息
Dec 08 Javascript
JavaScript 模拟用户单击事件
Dec 31 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
js时间控件只显示年月
Jan 08 Javascript
DOM事件探秘篇
Feb 15 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 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的FTP学习(三)
2006/10/09 PHP
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
php通用防注入程序 推荐
2011/02/26 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
Vue.js用法详解
2017/11/13 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
python实现2048小游戏
2015/03/30 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
Python实现手绘图效果实例分享
2020/07/22 Python
python实现粒子群算法
2020/10/15 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
保安公司服务承诺书
2014/05/28 职场文书
生活小常识广播稿
2014/09/16 职场文书
营销与策划实训报告
2014/11/05 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
2019年最新借条范本!
2019/07/08 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python