003_隐藏和显示效果

1. hide()方法

1.1. 如果被选的元素已被显示, 则隐藏该元素。

1.2. 语法:

$(selector).hide(speed,callback);

1.3. 参数

1.4. 如果元素已经是完全不可见, 则该效果不产生任何变化, 除非规定了callback函数。

2. show()方法

2.1. 如果被选元素已被隐藏, 则显示这些元素。

2.2. 语法:

$(selector).show(speed,callback);

2.3. 参数

2.4. 如果元素已经是完全可见, 则该效果不产生任何变化, 除非规定callback函数。

2.5. 该效果适用于通过jQuery隐藏的元素, 或在CSS中声明display:none的元素(但不适用于visibility:hidden的元素)。

3. toggle()方法

3.1. toggle()方法切换元素的可见状态。如果被选元素可见, 则隐藏这些元素, 如果被选元素隐藏, 则显示这些元素。

3.2. 语法:

$(selector).toggle(speed,callback,switch);

3.3. 参数

4. 例子

4.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>jQuery隐藏和显示效果</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("p").hide('fast');});$('#btn2').click(function(){$("p").show('fast');});$('#btn3').click(function(){$("p").toggle('fast');});$('#btn4').click(function(){$("p").hide('slow');});$('#btn5').click(function(){$("p").show('slow');});$('#btn6').click(function(){$("p").toggle('slow');});$('#btn7').click(function(){$("p").hide('normal');});$('#btn8').click(function(){$("p").show('normal');});$('#btn9').click(function(){$("p").toggle('normal');});$('#btn10').click(function(){$("p").hide();});$('#btn11').click(function(){$("p").show();});$('#btn12').click(function(){$("p").toggle();});$('#btn13').click(function(){$("p").hide(3000);});$('#btn14').click(function(){$("p").show(3000);});$('#btn15').click(function(){$("p").toggle(3000);});$('#btn16').click(function(){$("p").toggle(true);});$('#btn17').click(function(){$("p").toggle(false);});});</script></head><body><button id="btn1">fast隐藏段落</button> <button id="btn2">fast显示段落</button> <button id="btn3">fast隐藏/显示段落</button><br /><br /><button id="btn4">slow隐藏段落</button> <button id="btn5">slow显示段落</button> <button id="btn6">slow隐藏/显示段落</button><br /><br /><button id="btn7">normal隐藏段落</button> <button id="btn8">normal显示段落</button> <button id="btn9">normal隐藏/显示段落</button><br /><br /><button id="btn10">默认隐藏段落</button> <button id="btn11">默认显示段落</button> <button id="btn12">默认隐藏/显示段落</button><br /><br /><button id="btn13">3s隐藏段落</button> <button id="btn14">3s显示段落</button> <button id="btn15">3s隐藏/显示段落</button><br /><br /><button id="btn16">toggle(true)</button> <button id="btn17">toggle(false)</button><p style="width: 300px; height: 300px; background: red;">jQuery隐藏和显示效果</p></body>
</html>

4.2. 效果图

003_隐藏和显示效果相关推荐

如何灵活使用 ActionBar， Google 音乐ActionBar 隐藏和显示效果
ActionBar 的历史这里就不介绍了,相信大家都清楚:在一个 app 中,如果 ActionBar 运用的好,那么将会省去大量的代码,而且整个 app 效果也相当不错,大家有兴趣可以下载 goog ...
vue实现 toggle显示隐藏效果
背景介绍 jQuery中有个toggle()方法,可以切换元素的显示状态,在用vue时如果不引入jQuery如何实现这种效果? 使用场景常见有三种场景: 1.控制页面中一个dom元素 2.控制页面中 ...
jQuery中隐藏元素的hide方法
在我们想要隐藏页面中的某个元素时,我们会想到使用css样式中的hover伪类.通过给元素设置hover属性从而达到一个隐藏效果.但是这个方法只适用于隐藏少部分的元素,在后期我们还想要将其他元素进行隐藏 ...
jsp中写隐藏td标签_html中隐藏td
html|table|内容超出长度-隐藏|兼容IE和FF的写法. HTML中,一个表格,要达到二个条件: 1.内容多了不自动换行: 2.固定单元格宽度.如果内容超出,则隐藏: 如果在IE下,只是写成& ...
【FastDev4Android框架开发】RecyclerView完全解析之下拉刷新与上拉加载SwipeRefreshLayout(三十一)...
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/49992269 本文出自:[江清清的博客] (一).前言: [好消息] ...
php中td的属性设置,html table表格是什么？table标签中各种属性的使用方法
html table表格是什么? 首先让我们了解什么是表格,还有表格的作用什么是table表格:由一些被称之为单元格的矩形框按照从左到右从上到下的顺序排列到一起组成的 table表格的作用:以 ...
PHP网站使用JavaScript和Iframe简单实现部分刷新效果
本文主要是记录自己寒假作业PHP网站实现加载界面的文章,运行效果如下图所示.主要记录php+html+Apache开发网站的3个功能:(方便以后阅读和其他人学习) 1.如何实现简单页面 ...
html盒子全部蓝色,彻底弄懂CSS盒子模式之五
三.分析实现方法 1．从上面的截图可以看到有一标题,标题下面是一个列表,所以很容易想到用标签和无序列表来做结构,标题是一块有背景的矩形块,文字白色,文字在矩形块中居中对齐,所以给标签加个宽度控制,最 ...
c#web页面显示弹窗_基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用
前言在目前大数据时代背景之下,数据可视化的需求也变得越来越庞大,在数据可视化的背景之下,通过智能机器间的链接并最终将人机链接,结合软件和大数据分析的工业互联网也将变得越来越容易实现! 国家也敏锐意识 ...

003_隐藏和显示效果

003_隐藏和显示效果相关推荐

最新文章

热门文章