检测元素是否可见

使用.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> 

任何帮助感激地收到..

Answer 1

您正在寻找：

 .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'); } 

Answer 2

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

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

这是一个演示。

Answer 3

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