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=" ...
随机推荐
- yii 分页样式
需求及效果图如下 没什么说的,就是修改分页,修改了CLinks分页的样式 上代码 <?php class GsearchPager extends CBasePager { const CSS_ ...
- 在Github上面搭建Hexo博客（一）：部署到Github
什么是Hexo Hexo是一个基于Node.js的静态博客程序,可以方便的生成静态网页托管在Github和Heroku上.并且有很多人为其制作了很多优秀的主题(theme),你可以根据自己的喜好进行设 ...
- CSS中伪类的使用
原文:http://www.cnblogs.com/guopei/archive/2011/04/16/2017627.html 何为伪类? 也就是实际实现了类的效果,但是并没有实际添加到标签中的类, ...
- Nginx 反向代理配置实例（转）
user www www; worker_processes ; error_log logs/error.log notice; pid logs/nginx.pid; worker_rlimit_ ...
- dp、sp 转换为 px 的工具类
public class DisplayUtil { /** * 将px值转换为dip或dp值,保证尺寸大小不变 * * @param pxValue (DisplayMetrics类中属性densi ...
- eclipse中build path 中JDK与java compiler compliance level的问题（转）
roject facets做什么用? http://baike.baidu.com/view/6257360.htm,其实我感觉,就是让我们在创建项目时候,可以独立定义一个有一个模板供我们使用,在里面 ...
- 如何通过Request.ServerVariables["HTTP_USER_AGENT"]获取客户端操作系统信息
http://www.useragentstring.com/pages/api.php
- mysql死锁--源于外键关联
死锁 存在于行级锁 存在的条件 1.资源只能同时被一个线程占有 2.资源占有不能被强制剥夺 3.请求和保持占有(在请求占有资源的同时能保持现有资源的占有) 4.死循环(一般做程序的人最关注的点) 一到 ...
- JAVA-1-HelloWorld
public class HelloWorld{ public static void main(String[] args){ System.out.println("HelloWorld ...
- QQ登录api
<?php namespace Api\Member; class QQConnect{ /** * 获取QQconnect Login 跳转到的地址值 * @return array 返回包含 ...