检测元素是否可见

使用.fadeIn().fadeOut() ,我一直隐藏/显示页面上的一个元素,但有两个button,一个隐藏和一个显示。 我现在想要有一个button来切换两个。 因此,我的问题是如何检测元素是否可见?

我的HTML是这样的:

 <a onclick="showTestElement()">Show</a> <a onclick="hideTestElement()">Hide</a> 

我的JS,因为它是:

 <script> function showTestElement(){ $('#testElement').fadeIn('fast'); } function hideTestElement(){ $('#testElement').fadeOut('fast'); } </script> 

我的HTML,我想要它:

 <a onclick="toggleTestElement()">Show/Hide</a> 

我的JS,因为我想要它,虽然纯粹的jQuery会很好:

 <script> function toggleTestElement(){ if (document.getElementById('testElement').***IS_VISIBLE***) { $('#testElement').fadeOut('fast'); } else{ $('#testElement').fadeIn('fast'); } } </script> 

任何帮助感激地收到..

您正在寻找:

 .is(':visible') 

尽pipe你应该改变你的select器来使用jQuery,考虑到你在其他地方使用它:

 if($('#testElement').is(':visible')) { // Code } 

需要注意的是,如果目标元素的父元素中的任何一个被隐藏,则子节点上的.is(':visible')将返回false (这是有道理的)。

jQuery 3

:visible是一个相当慢的select器,因为它必须遍历DOM树检查一堆元素。 jQuery 3有个好消息,但是, 这篇文章解释了( Ctrl + F for :visible ):

感谢Paul Irish在Google做出的一些侦探工作,我们发现了一些情况,当可见的自定义select器在同一个文档中多次使用时,我们可以跳过一堆额外的工作。 那个特例现在要快17倍!

请记住,即使有了这种改进,诸如visible和hidden之类的select器也可能是昂贵的,因为它们依赖于浏览器来确定元素是否实际显示在页面上。 这可能需要在最糟糕的情况下完全重新计算CSS样式和页面布局! 虽然我们并不打算在大多数情况下使用它们,但我们build议testing您的页面以确定这些select器是否导致性能问题。


进一步扩展到你的特定用例,有一个名为$.fadeToggle()的内置jQuery函数:

 function toggleTestElement() { $('#testElement').fadeToggle('fast'); } 

没有必要,只需在元素上使用fadeToggle()

 $('#testElement').fadeToggle('fast'); 

这是一个演示。

 if($('#testElement').is(':visible')){ //what you want to do when is visible }