jQuery效果之显示与隐藏
.hide([duration][,complete])——目标元素的隐藏。
.show([duration][,complete])——目标元素的显示；
.toggle([duration][,complete])——当目标元素隐藏时则显示。否则隐藏。
注：可选參数[duration]为方法运行的时间区间；[,complete]为回调函数。
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>显示与隐藏</title>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/my.js"></script>
<style>
div{
background: #005599;
width: 100px;
height: 100px;
margin: 5px;
float: left;
}
</style>
</head>
<body>
<img src="images/g.jpg"/>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button>
<button id="btn3">隐藏/显示</button> </body>
</html>
my.js代码部分：
/*显示与隐藏*/
$(document).ready(function(){
//隐藏
$('#btn1').click(function(){
//$('img').hide();
$('img').hide(1000);
});
//显示
$('#btn2').click(function(){
//$('img').show();
$('img').show(1000);
});
//切换显示与隐藏
$('#btn3').click(function(){
//$('img').toggle();
$('img').toggle(1000);
});
//利用hide()制作一个效果
for(var i=0;i<5;i++){
$("<div>").appendTo(document.body);
}
$('div').click(function(){
$(this).hide(2000,function(){
$(this).remove();
})
})
})
jQuery效果之显示与隐藏的更多相关文章
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- jQuery控制元素显示、隐藏、切换、滑动的方法
jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...
- jquery里面控制显示和隐藏 ___土狗toggle
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(funct ...
- jquery渐渐的显示、隐藏效果
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title& ...
- jQuery下的显示和隐藏
因为太久没更新了,所以来放一点没意思的内容. 做的是jQuery框架的隐藏和显示,HTML如下: <ul> <li>1</li> <li>2</l ...
- jquery 判断元素显示或隐藏
$().is(":hidden"); $().is(":visible");
- jquery点击显示或隐藏
点击第一个dd,给第一li添加class,点击第二个dd,给第二个li添加class,以此类推 $(function(){ $("dd > a").click(fun ...
- vue类似tab切换的效果，显示和隐藏的判断。
两者切换,动态显示对应的列表详情. 通过v-show的判断 数据驱动
- jQuery 效果 —— 隐藏和显示
jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...
随机推荐
- service mysqld start 报错：service mysqld start 报错 090517 13:34:15 [ERROR] Can't open the mysql.plugin table. Please run mysql_upgrade to create it. 090Can't open the mysql.plugin table. Please run mysql
service mysqld start 报错 090517 13:34:15 [ERROR] Can't open the mysql.plugin table. Please run mysql_ ...
- T-SQL语言基础（转载）
本文转自http://www.cnblogs.com/Jolinson/p/3552786.html 这里的摘抄来自<Microsoft SQL Server 2008技术内幕:T-SQL语言基 ...
- jmeter 部署问题。
-D systemproperty 1.双网卡机器设置 执行 jmeter-server -Djava.rmi.server.hostname=189.61.143.199 2.在Beanshel ...
- easyUI样式之easyui-switchbutton
HTML文件 <tr> <th>是否发送短信:</th> <td> <input id="sendTxt" name=&quo ...
- Linux下安装Eclipse的PHP插件（PHPEclipse）
下载: Eclipse: http://www.eclipse.org/downloads/ (本人用的Ubuntu,直接在SoftWare Center中下载的) (选择适合你系统的相应 ...
- 今天终于看了一下tanh函数的形式，双曲正切函数
tanh = sinh / cosh sinh = Hyperbolic sin cosh = Hyperbolic cos
- 资源的GPUAddress
BufferAddress CommandHandle TextureHandle 给shader采样的 ImageHandle 给shader load store的.../imageLoad() ...
- JavaWeb项目实现文件下载
File file = new File(path);// path是根据日志路径和文件名拼接出来的 String filename = file.getName();// 获取日志文件名称 Inpu ...
- 批量删除Redis中的key
bin/redis-cli -h 192.168.46.151 -p 6379 keys "rulelist*" | xargs bin/redis-cli -h 192.168 ...
- 2017.6.30 IDEA插件--gsonfomat的安装与使用
参考来自:http://www.cnblogs.com/1024zy/p/6370305.html 1.安装 2.使用 (1)新建一个空类 (2)在空类里按快捷键:alt+s,打开gsonformat ...