.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效果之显示与隐藏的更多相关文章

  1. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  2. jQuery控制元素显示、隐藏、切换、滑动的方法

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...

  3. jquery里面控制显示和隐藏 ___土狗toggle

    $("#hide").click(function(){ $("p").hide(); }); $("#show").click(funct ...

  4. jquery渐渐的显示、隐藏效果

    <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title& ...

  5. jQuery下的显示和隐藏

    因为太久没更新了,所以来放一点没意思的内容. 做的是jQuery框架的隐藏和显示,HTML如下: <ul> <li>1</li> <li>2</l ...

  6. jquery 判断元素显示或隐藏

    $().is(":hidden"); $().is(":visible");

  7. jquery点击显示或隐藏

    点击第一个dd,给第一li添加class,点击第二个dd,给第二个li添加class,以此类推 $(function(){     $("dd > a").click(fun ...

  8. vue类似tab切换的效果,显示和隐藏的判断。

    两者切换,动态显示对应的列表详情. 通过v-show的判断 数据驱动

  9. jQuery 效果 —— 隐藏和显示

    jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...

随机推荐

  1. 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_ ...

  2. T-SQL语言基础(转载)

    本文转自http://www.cnblogs.com/Jolinson/p/3552786.html 这里的摘抄来自<Microsoft SQL Server 2008技术内幕:T-SQL语言基 ...

  3. jmeter 部署问题。

    -D  systemproperty 1.双网卡机器设置 执行 jmeter-server  -Djava.rmi.server.hostname=189.61.143.199 2.在Beanshel ...

  4. easyUI样式之easyui-switchbutton

    HTML文件 <tr> <th>是否发送短信:</th> <td> <input id="sendTxt" name=&quo ...

  5. Linux下安装Eclipse的PHP插件(PHPEclipse)

    下载: Eclipse: http://www.eclipse.org/downloads/       (本人用的Ubuntu,直接在SoftWare Center中下载的) (选择适合你系统的相应 ...

  6. 今天终于看了一下tanh函数的形式,双曲正切函数

    tanh = sinh / cosh sinh  = Hyperbolic sin cosh = Hyperbolic cos

  7. 资源的GPUAddress

    BufferAddress CommandHandle TextureHandle 给shader采样的 ImageHandle 给shader  load store的.../imageLoad() ...

  8. JavaWeb项目实现文件下载

    File file = new File(path);// path是根据日志路径和文件名拼接出来的 String filename = file.getName();// 获取日志文件名称 Inpu ...

  9. 批量删除Redis中的key

    bin/redis-cli -h 192.168.46.151 -p 6379 keys "rulelist*" | xargs bin/redis-cli  -h 192.168 ...

  10. 2017.6.30 IDEA插件--gsonfomat的安装与使用

    参考来自:http://www.cnblogs.com/1024zy/p/6370305.html 1.安装 2.使用 (1)新建一个空类 (2)在空类里按快捷键:alt+s,打开gsonformat ...