jQuery，hide()和show()无效！！！
[问题点数：40分，结帖人u]
本版专家分：0
结帖率 100%
CSDN今日推荐
本版专家分：0
本版专家分：4370
本版专家分：0
匿名用户不能发表回复！|
其他相关推荐jquery .hide() .show()方法在IE可以用，在FF/CHROME没有效果。如何解决？
[问题点数：20分，结帖人xwj1003]
本版专家分：0
结帖率 98.98%
CSDN今日推荐
本版专家分：42492
2011年7月 Web 开发大版内专家分月排行榜第一
2011年6月 Web 开发大版内专家分月排行榜第二
本版专家分：0
本版专家分：10627
2011年7月 Web 开发大版内专家分月排行榜第三
本版专家分：36198
2011年8月 Web 开发大版内专家分月排行榜第一
2011年12月 Web 开发大版内专家分月排行榜第二
本版专家分：0
本版专家分：36198
2011年8月 Web 开发大版内专家分月排行榜第一
2011年12月 Web 开发大版内专家分月排行榜第二
本版专家分：2
本版专家分：326
本版专家分：0
匿名用户不能发表回复！|
其他相关推荐
在上一小节中，调用show()和hide()方法仅是实现的元素的显示和隐藏功能，如果在这些方法中增加“speed”参数可以实现动画效果的显示与隐藏，同时，如果添加了方法的回调函数，它将在显示或隐藏执行成功后被调用。
例如，以动画的方式显示或隐藏页面中的图片，同时，当显示或隐藏完成时，对应的按钮状态将变为不可用，如下图所示：
在浏览器中显示的效果：
从图中可以看出，
$(document).ready(function(){
$(&p&).click(function(){
$(this).hide();
$(&pl&).click(function(){
$(this).hide();
alert(&TEST&)
//(this).show();
因为【month.hide()】无效，所以采用【month.wrap(&&span style='display:none'&&/span&&);】的方式来隐藏。
【month.show()】由【month.replaceAll(monthP);】这个month子节点来代替包裹着【span】的父节点来显示。
show()显示
hide ()隐藏
*{ margin:0; padding:0;}
body{font-size:15}
#container{ margin:60 line-height:2 width:300 border:1px solid #CCC;}
.head{ background:#999; padding:5 cur
原因:show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。
1.visibility:hidden
//visibility:hidden表示默认隐藏
var currentBtn = document.getElementById(&currPage&);
slideUp(speed,[callback])通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。slideDown(speed,[callback])通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果
$('#div1').show(1000);
//显示。1000毫秒，表示动画显示过程时间。
$('#div1').hide(1000);
$('#div1').toggle(1000);
//合成显示隐藏
显示隐藏动画
width:100 height:100
background-color:
PHP jQuery效果-隐藏和显示 jQuery hide()和show()
jQuery中.show（）和.hide(）和.click（）和.toggle（）事件
1、show()与hide()
show()和hide()方法用于显示或隐藏页面中的元素，它的调用格式分别为：
$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])
参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函jQuery各种show/hide方式的性能测试 .
这篇文章是jQuery各种show/hide方式的性能测试。作者之所以测试这个源于Robert Duffy在San Francisco举行的jQuery大会上的一句话：“.hide()和.show()的执行速度会比直接改变css慢”。但由于未能找Robert Duffy问明原因，所以作者就自己去做了这个测试。下面的翻译并不是全文翻译，只节选了一些重点。
用作测试的是一个含有100个div的HTML页面，div带有class和一些内容。为了排除掉寻找这些div所花费的时间，所以把选择器$('div')缓存起来了。用作测试的jQuery版本是1.4.2，所以测试结果也只是针对这个版本，在其他版本可能就不是这些结果了。
测试的jQuery方法分别是：
.toggle() .show() 和 .hide() .css({'display':'none'}) 和 .css({'display':'block'}) .addClass('hide') 和 .removeClass('hide') 改变&style&元素的一个属性
.show() 和 .hide()
在所有浏览器中，这两个方法在隐藏DOM元素上相对来说比较慢。主要原因在于.hide()方法必须先保存元素的&display&属性，这样.show()才能把元素恢复到原来的状态。这里用到了.data()这个jQuery方法，把信息保存在DOM元素上。为了达到这个目的，.hide()在每个元素上循环了两次，一次用来保存当前的&display&值，一次用来更新样式&display& 为&none&。根据源代码上的注释，这样做是为了防止浏览器在每个循环上进行重新渲染（reflow）。.hide()方法还会检查你是否传递了使用动画效果的参数，就算传入一个&0&也会让性能大打折扣。在第一次调用.hide()的时候性能最慢，在之后再调用则会变快。
FireFox 3.6
29ms / 10ms
Safari 4.05
Opera 10.10
Chrome 5.0.3
31ms / 16ms
15ms / 16ms
这个方法是最慢的。它会检查选择器返回的每一个元素当前是否可见，如果可见的话就调用.hide()方法，不可见则调用.show()方法。不但如此，它不仅会检查你是否传递了一个boolean值进去阻止.hide()或者.show()的执行，还会检查看你是否传入了function来进行切换（toggle）而不是对可见性进行切换。看起来这个方法还有很大的改善空间，例如可以先一次过把隐藏的元素 select出来，然后调用.show()方法，同时把其余的元素select出来调用.hide()方法。
FireFox 3.6
80ms / 59ms
Safari 4.05
24ms / 30ms
Opera 10.10
67ms / 201ms
Chrome 5.0.3
55ms / 20ms
296ms / 78ms
328ms / 47ms
.addClass() 和 .removeClass()
这是两个很漂亮的隐藏/显示DOM元素方法。在Firefox上它的速度是.show()和.hide()的两倍，而在Safari上则是三倍。不过在IE6，IE7，Chrome和Opera上，两种方法几乎没什么差别。值得一提的是，对于100个DOM节点来说，两种方法在Firefox上相差18ms，在Safari相差4ms，速度的差异只会体现在大量节点选择的时候。不过增加和移除class需要你花费更多的工作，因为你需要创建一个用于隐藏的class，然后还要时刻关注着这个class的优先级以保证DOM能隐藏。jQuery增加和移除class是通过字符串操作的，所以我觉得随着元素上class数量的增加，这个方法会变慢，但是我还没对此进行测试过。
FireFox 3.6
11ms / 11ms
Safari 4.05
Opera 10.10
Chrome 5.0.3
47ms / 32ms
15ms / 16ms
.css({'display':'none'}) 和 .css({'display':'block'})
这两个方法也很漂亮。相对于.addClass()和.removeClass()，IE6/7和Opera上的速度都得到了提升，而在其他浏览器上则能保持水准。当你知道要改变的元素的当前display样式，或者没有通过inline的方式去改变元素的display样式时，这两个方法很好用。如果你通过 inline的方式改变了display样式，那么你需要确保在使得元素重新可见时display值要设置正确。如果你只是使用了元素的默认 display值或者在css里设置display值，那么你只需要用类似.css({'display':''})的方法移除样式，元素就会恢复到它在
css上的样式或者默认display值。作为一个类库，jQuery不能假定元素的display不是通过inline方式设置的，所以它需要被人手的去确定。不过既然你知道你不会去inline的设置display，那么你就可以去避免这个造成缓慢的主要因素。
FireFox 3.6
14ms / 12ms
Safari 4.05
Opera 10.10
Chrome 5.0.3
16ms / 16ms
0ms / 0ms // 少于15ms会变成0ms，具体看
禁止样式表
纯粹为了好玩，我想：如果我们不在每个dom节点上花功夫，而是去捣鼓样式表会怎样呢？这样会提高速度吗？其实就日常使用来说，上面的测试用到的方法已经足够快了，但是如果页面上有10000个节点需要进行隐藏和显示呢？只是把它们全部选择出来就已经够慢了。如果我可以控制样式表，那么就可以完全避免这些时间花费了。不过我得告诉你，这个方法是有很大风险的。
风险在于控制样式表时的跨浏览器问题。首先，我尝试能不能通过jQuery插入一个带有class的&style&标签，但是却出现了跨浏览器问题。然后我尝试用javascript去创建stylesheet节点和class，但是实在有太多的API了，要搞清楚需要花不少的时间。最后，放弃了编程的方式，我在head区里写了一个带有class的style标签。通过编程的方式来创建stylesheet实在是太慢了，但是如果它一旦被创建好，那么给它一个ID和使用它的&disabled&属性就是轻而易举的事情了。
&style id=&special_hide&&.special_hide { display: }&/style&
&!-- ... --&
&div class=&special_hide&&Special hide DIV&/div&
然后在javascript里：
$('#special_hide').attr('disabled, 'true');
搞定！所有带有&special_hide&这个class的元素都显示出来了。要隐藏它们，你只需要……
$('#special_hide').attr('disabled', 'false');
现在它们全部都隐藏了。总的javascript耗时在所有浏览器上都是0-1ms。你的javascript 只是用来改变一个属性。当然，浏览器还是需要花费时间去重新渲染页面的，但是实际上你已经避免了javascript的处理时间。如果你调用了.toggle()，.hide()或者 .css()这几个方法，那么这个方法就会失效。因为那几个方法会通过内联方式设置css样式，这些样式有更高的优先级。要重新使这个方法生效，只需调用.css('display', '') 把内联的样式移除掉。这个方法同样需要花费你更多的精力，因为那需要去定义class，同时把这些class赋给页面上需要进行显示/隐藏的元素，但是如果你所要处理的元素数量是极其庞大的话，那么这也许是值得的。
简要回顾一下，下面是改变元素显示状态的方法，按照最快到最慢的次序排列：
禁用/启用样式表 .css('display', ''), .css('display', 'none') .addClass(), .removeClass() .show(), .hide() .toggle()
需要注意的是，在大多数的情况下，这些方法都足够的快了。当你要操作很大的jQuery集合时，那么.show() 和 .hide()方法在IE下就会变得很慢了，这是你可能要用addClass() 或者 .removeClass()方法。禁用/启用样式表的方法只有在很极端的情况下才有必要用到。
Translated by
@ company ON Jul 26, 2010
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？12 条评论分享收藏感谢收起写回答