使用jQuery检测元素是否可见[重复]

本文翻译自：Detect if an element is visible with jQuery [duplicate]

This question already has an answer here: 这个问题在这里已有答案：

• How do I check if an element is hidden in jQuery? 如何检查jQuery中是否隐藏了一个元素？ 55 answers 55个答案

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. 使用.fadeIn()和.fadeOut() ，我一直在我的页面上隐藏/显示一个元素，但有两个按钮，一个用于隐藏，一个用于显示。 I now want to have one button to toggle both . 我现在想要一个按钮来切换两者 。

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? 如何检测元素是否可见？

---

#1楼

参考：https://stackoom.com/question/aoXZ/使用jQuery检测元素是否可见-重复

---

#2楼

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

:visible has had a reputation for being quite a slow selector as it has to traverse up the DOM tree inspecting a bunch of elements. :visible因为它必须遍历DOM树检查一堆元素而成为一个相当慢的选择器。 There's good news for jQuery 3, however, as this post explains ( Ctrl + F for :visible ): 然而，jQuery 3有个好消息，正如这篇文章所解释的那样（ Ctrl + F代表: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. 感谢Paul Irish在谷歌的一些侦探工作，我们发现了一些情况，当自定义选择器如：可见在同一文档中多次使用时，我们可以跳过一堆额外的工作。 That particular case is up to 17 times faster now! 这个特殊情况现在快了17倍！

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. 请记住，即使有了这些改进，选择器如：visible和：hidden也可能很昂贵，因为它们依赖于浏览器来确定元素是否实际显示在页面上。 That may require, in the worst case, a complete recalculation of CSS styles and page layout! 在最坏的情况下，这可能需要完全重新计算CSS样式和页面布局！ While we don't discourage their use in most cases, we recommend testing your pages to determine if these selectors are causing performance issues. 虽然我们不鼓励在大多数情况下使用它们，但我们建议您测试页面以确定这些选择器是否会导致性能问题。

---

Expanding even further to your specific use case, there is a built in jQuery function called $.fadeToggle() : 进一步扩展到您的特定用例，有一个内置的jQuery函数$.fadeToggle() ：

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

---

#3楼

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

---

#4楼

There's no need, just use fadeToggle() on the element: 没有必要，只需在元素上使用fadeToggle() ：

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

Here's a demo. 这是一个演示。