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=" ...
随机推荐
- svg转换工具
package com.rubekid.springmvc.utils; import java.io.ByteArrayInputStream; import java.io.ByteArrayOu ...
- python代码合并
http://www.baidu.com/s?wd=python%E4%BB%A3%E7%A0%81%E5%90%88%E5%B9%B6&rsv_bp=0&ch=&tn=mon ...
- Memcached 搭建过程
原文链接:http://www.open-open.com/lib/view/open1324368235733.html 安装 memcached 服务端 yum -y install libeve ...
- 张羿给的删除重复数据的mssql语句
select count(1), gsdm, idfrom ods_sc.T_D_DEVICE_COMMONgroup by gsdm, idhaving count(1) > 1; delet ...
- Ubuntu桌面版与服务器版有什么不同?
提到安装Linux,Ubuntu可谓是最受欢迎的.为了满足每个人的需求,出现了不少版本或风格的Ubuntu;其中两项便是桌面版与服务器版.只要发布版本号一致,这两者从核心来说也就是相同的,唯 ...
- Css Div半透明
用CSS控制外层DIV不透明,而内层DIV透明,这样实现的效果是意想不到的,还不错吧,其实代码也是很简单的,也很好理解,主要是用了CSS的滤镜. <html xmlns="http:/ ...
- php改写session到数据库
session改写mysql 在调用 session_start();的地方改用实例化本类即可new SessionDB(); session_set_save_handler( array($thi ...
- C/C++中unsigned char和char的区别
代码: #include <cstdio> #include <iostream> using namespace std; int main(){ unsigned char ...
- 给C++初学者的50个忠告(好文转载)
给C++初学者的50个忠告 1.把C++当成一门新的语言学习(和C没啥关系!真的.): 2.看<Thinking In C++>,不要看<C++变成死相>: 3. ...
- DEV XtraGrid绑定非绑定列(转)
在Gridview创建一列 .将该列的UnboundType属性设置为bound(默认值)以外的数据类型 为该列设置一个窗体内全局唯一的FieldName,注意这个FieldName甚至不能出现在 ...