jQuery效果---隐藏与显示
隐藏与显示
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="myjs.js"></script>
</head>
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>
myjs.js
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();//点击按钮后1秒隐藏
});
$("#show").click(function(){
$("p").show();//点击按钮后1秒显示
});
});
通过上面的代码实现了两个按钮来分别控制p元素的隐藏和显示，控制了时间为1秒，视觉效果比较好
但是大部分的隐藏和显示其实是1个按钮来控制的，如音乐播放器的开始/暂停，所以接下来是一个按钮的效果
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="myjs.js"></script>
</head>
<body>
<p>hello</p>
<button id="toggle">隐藏/显示</button>
</body>
</html>
myjs.js
$(document).ready(function(){
$("#toggle").click(function(){
$("p").toggle();
});
});
最后来实现这样的一个效果：屏幕上有5个正方形的黄色块状，当点击任意一块时，这块会产生隐藏的缓慢3D动画效果，效果比较好看
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.1.0.min.js"></script> <link href="style1.css" rel="stylesheet" type="text/css">
</head>
<body>
<script>
for(var i=;i<;i++){
$("<div>").appendTo(document.body);
}
$("div").click(function(){
$(this).hide(,function(){
$(this).remove();
});
});
</script>
</body>
</html>
css代码：
div{
background:#ece023;
width:50px;
height:50px;
margin:2px;
float:left;
}
jQuery效果---隐藏与显示的更多相关文章
- jQuery 效果 —— 隐藏和显示
jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...
- jQuery 效果 - 隐藏和显示
$('...').hide();//隐藏 $('...').show();//显示 以上使用需要针对特定的功能单独使用,如果是混用,那么就要有标志位去实现,而通常两者更高级的一步到位实现: $('.. ...
- jQuery 效果 – 隐藏和显示
在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() 方法. 隐藏.显示.切换,滑动 ...
- jQuery效果------隐藏hide()/显示show()
hide()和show() hide():隐藏文本. show():显示文本. 语法: $(selector).hide(speed,callback); $(selector).show(speed ...
- jQuery效果--隐藏和显示
jQuery hide() 和 show() 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click( ...
- jQuery效果-隐藏与显示 小方块的移除
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- JQuery效果隐藏/显示
hide() 方法 语法 $(selector).hide(speed,callback) show() 方法 语法 $(selector).show(speed,callback) 参数 描述 sp ...
- jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链
隐藏和显示 $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度, ...
- jQuery_效果(隐藏和显示)
一.jQuery hide() 显示和 show()隐藏 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: <script type=" ...
随机推荐
- 【移动开发】Android中WIFI开发总结（一）
WIFI就是一种无线联网技术,常见的是使用无线路由器.那么在这个无线路由器的信号覆盖的范围内都可以采用WIFI连接的方式进行联网.如果无线路由器连接了一个ADSL线路或其他的联网线路,则又被称为“热 ...
- Android中使用ListView绘制自定义表格(2)
上回再写了<Android中使用ListView绘制自定义表格>后,很多人留言代码不全和没有数据样例.但因为项目原因,没法把源码全部贴上来.近两天,抽空简化了一下,做了一个例子. 效果图如 ...
- HTML学习(1)
1.缩写和首字母缩写<abbr><acronym> <abbr title="etcetera">etc.</abbr> <a ...
- ADB错误“more than one device and emulator”（转）
当我连着手机充电的时候,启动模拟器调试,执行ADB指令时,报错.C:\Users\gaojs>adb shellerror: more than one device and emulatorC ...
- ORA-16018: cannot use LOG_ARCHIVE_DEST with LOG_ARCHIVE_DEST_n or DB_RECOVERY_FILE_DEST【error收集】
之前一直没有注意一个事情, 关于设置archive归档路径设置的问题. 设置数据库为归档模式的命令: 1.首先要切换到mount状态: 2.执行alter system archivelog; 3.查 ...
- Struts2 UI标签
表单标签的共同属性(该属性只在没有使用 simple 主题时才可以使用) form 标签 用来呈现 HTML 语言中的表单元素 默认情况下, form 标签将被呈现为一个表格形式的 HTML 表单. ...
- IO流（File类
File类 三个构造方法 File(String filename)//模式和应用程序一个目录下 File(String directoryPath,String filename)//文件的绝对路径 ...
- 设置Activity显示和关闭时的动画效果
设置Activity显示和关闭时的动画效果 通过overridePendingTransition方法可以设置Activity显示和关闭的动画效果.首先需要在res/anim目录中建立相应的动画资源文 ...
- python3.3 基础 新特性
前段时间看到对 python 之父的采访,持 python应尽量使用新版的态度. 所以学习,就从比较新的版本开始吧. 3.x 之后的版本与2.x 的版本还是有些不同,仅从入门的基础部分即可感受到, 比 ...
- win8\win server 2012添加【中文--美式键盘】
1. 修改注册表 Windows Registry Editor Version 5.00 [HKEY_CURRENT_USERKeyboard Layout] [HKEY_CURRENT_USERK ...