使用jQuery检测元素是否可见

Question

使用.fadeIn()和.fadeOut()，我一直在页面上隐藏/显示一个元素，但是有两个按钮，一个用于隐藏，一个用于显示。现在我想要一个按钮来切换两个操作都可以实现。

我的HTML / JavaScript代码如下：

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

function showTestElement() {
  $('#testElement').fadeIn('fast');
}

function hideTestElement() {
  $('#testElement').fadeOut('fast');
}

我想要的HTML/JavaScript代码：

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

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

如何检测元素是否可见？

- TheCarver

Answer 1

你正在寻找：

.is(':visible')

虽然你应该考虑改用 jQuery 来选择元素，因为你已经在其他地方使用了它：

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

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

jQuery 3

:visible一直以来都是一个相当慢的选择器，因为它必须遍历整个DOM树并检查大量的元素。然而，对于 jQuery 3 来说有一个好消息，正如这篇文章所解释的那样（按下Ctrl + F查找:visible）:

得益于 Google 的 Paul Irish 所做的一些侦探工作，我们确定了一些情况，在这些情况下，当像 :visible 这样的自定义选择器在同一个文档中使用多次时，我们可以跳过许多额外的工作。那种特定情况现在快了多达17倍！

请记住，即使有了这个改进，像 :visible 和 :hidden 这样的选择器仍然可能很耗费资源，因为它们取决于浏览器来确定元素是否实际显示在页面上。在最坏的情况下，这可能需要完全重新计算CSS样式和页面布局！虽然我们不鼓励在大多数情况下不使用它们，但我们建议测试您的页面以确定这些选择器是否导致性能问题。

---

针对您特定的用例，还有一个内置的jQuery函数叫做$.fadeToggle()：

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

- Bojangles

---

你知道如果父元素不可见，这段代码是否能正常工作吗？从技术上讲，如果父元素不可见，则其中的子元素也不可见。 - Philll_t

根据这个页面（http://blog.jquery.com/2009/02/20/jquery-1-3-2-released/#:visible.2F:hidden_Overhauled），如果元素的浏览器报告的 offsetWidth 或 offsetHeight 大于 0，则该元素是可见的。这个 JSBin 显示，如果父元素被隐藏，那么它的子元素也会被隐藏。 - Bojangles

为什么要用jQuery呢，如果你需要在每次滚动事件中检查数百个元素，这并不是很高效的做法...直接使用JS会更好。 - vsync

与其抱怨，不如发布一个支持IE7及以上版本的普通JavaScript解决方案。这将比发布挖苦（尽管正确）的评论更有帮助。 - Bojangles

这是我针对这个问题的代码 https://dev59.com/SnVC5IYBdhLWcg3wz0l9#22969337 - Aleko

Answer 2

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

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

这里有一个演示。

- Ry-

---

这是一个棘手的答案，问题明确要求一件事，但对于提问者而言，最佳做法是另一种方式。 - Jared Farrish

Answer 3

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

- Ivan Castellanos