使用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');

  }

}

如何检测元素是否可见？

Answer 1

无需使用，只需fadeToggle()在元素上使用：$('#testElement').fadeToggle('fast');

Answer 2

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

Answer 3

您正在寻找：.is(':visible')尽管您可能考虑到仍在其他地方使用它，但应该将选择器更改为使用jQuery：if($('#testElement').is(':visible')) {&nbsp; &nbsp; // 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() {&nbsp; &nbsp; $('#testElement').fadeToggle('fast');}