Javascript 使用 jQuery 检测元素是否可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8774089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect if an element is visible with jQuery
提问by TheCarver
Using .fadeIn()and .fadeOut(), I have been hiding/showing an element on my page, but with two buttons, one for hide and one for show. I now want to have onebutton to toggle both.
使用.fadeIn()and .fadeOut()，我一直在我的页面上隐藏/显示一个元素，但有两个按钮，一个用于隐藏，一个用于显示。我现在想要一个按钮来切换两者。
My HTML / JavaScript as it is:
我的 HTML/JavaScript 原样：
<a onclick="showTestElement()">Show</a>
<a onclick="hideTestElement()">Hide</a>
function showTestElement() {
$('#testElement').fadeIn('fast');
}
function hideTestElement() {
$('#testElement').fadeOut('fast');
}
My HTML / JavaScript as I would like to have it:
我想要的 HTML / JavaScript：
<a onclick="toggleTestElement()">Show/Hide</a>
function toggleTestElement() {
if (document.getElementById('testElement').***IS_VISIBLE***) {
$('#testElement').fadeOut('fast');
} else {
$('#testElement').fadeIn('fast');
}
}
How do I detect if the element is visible or not?
如何检测元素是否可见？
回答by Bojangles
You're looking for:
您正在寻找：
.is(':visible')
Although you should probably change your selector to use jQuery considering you're using it in other places anyway:
尽管考虑到您在其他地方使用它，您可能应该更改选择器以使用 jQuery：
if($('#testElement').is(':visible')) {
// Code
}
It is important to note that if any one of a target element's parent elements are hidden, then .is(':visible')on the child will return false(which makes sense).
需要注意的是，如果目标元素的任何一个父元素被隐藏，那么.is(':visible')子元素就会返回false（这是有道理的）。
jQuery 3
jQuery 3
:visiblehas had a reputation for being quite a slow selector as it has to traverse up the DOM tree inspecting a bunch of elements. There's good news for jQuery 3, however, as this postexplains (Ctrl+ Ffor :visible):
:visible由于它必须遍历 DOM 树以检查一堆元素，因此它的选择器速度非常慢，因此享有盛誉。然而，jQuery 3 有个好消息，正如这篇文章所解释的（Ctrl+ Ffor :visible）：
Thanks to some detective work by Paul Irish at Google, we identified some cases where we could skip a bunch of extra work when custom selectors like :visible are used many times in the same document. That particular case is up to 17 times faster now!
Keep in mind that even with this improvement, selectors like :visible and :hidden can be expensive because they depend on the browser to determine whether elements are actually displaying on the page. That may require, in the worst case, a complete recalculation of CSS styles and page layout! While we don't discourage their use in most cases, we recommend testing your pages to determine if these selectors are causing performance issues.
感谢 Paul Irish 在 Google 的一些侦探工作，我们发现了一些情况，当在同一文档中多次使用 :visible 等自定义选择器时，我们可以跳过一些额外的工作。这个特殊情况现在快了 17 倍！
请记住，即使有了这种改进，像 :visible 和 :hidden 这样的选择器也可能很昂贵，因为它们依赖于浏览器来确定元素是否实际显示在页面上。在最坏的情况下，这可能需要完全重新计算 CSS 样式和页面布局！虽然我们不鼓励在大多数情况下使用它们，但我们建议测试您的页面以确定这些选择器是否会导致性能问题。
Expanding even further to your specific use case, there is a built in jQuery function called $.fadeToggle():
进一步扩展到您的特定用例，有一个内置的 jQuery 函数，称为$.fadeToggle()：
function toggleTestElement() {
$('#testElement').fadeToggle('fast');
}
回答by Ry-
There's no need, just use fadeToggle()on the element:
没有必要，只需fadeToggle()在元素上使用：
$('#testElement').fadeToggle('fast');
回答by Ivan Castellanos
if($('#testElement').is(':visible')){
//what you want to do when is visible
}
