检测元素是否可见

Question

使用.fadeIn()和.fadeOut(),我一直在我的页面上隐藏/显示一个元素,但有两个按钮,一个用于隐藏,一个用于显示.我现在想要一个按钮来切换两者.因此,我的问题是如何检测元素是否可见？

我的HTML原样:

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

我的JS是这样的:

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

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

我希望得到我的HTML:

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

我希望得到我的JS,虽然纯粹的jQuery会很好:

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

任何帮助感激地收到..

Answer 1

您正在寻找:

.is(':visible')

虽然您可能应该更改您的选择器以使用jQuery,因为您仍然在其他地方使用它:

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

重要的是要注意,如果目标元素的父元素中的任何一个被隐藏,那么.is(':visible')孩子将返回false(这是有意义的).

jQuery 3

:visible由于它必须遍历DOM树来检查一堆元素,因此它已成为一个相当慢的选择器.然而,jQuery 3有个好消息,正如这篇文章解释的那样(Ctrl+ Ffor :visible):

感谢Paul Irish在谷歌的一些侦探工作,我们发现了一些情况,当自定义选择器如:可见在同一文档中多次使用时,我们可以跳过一堆额外的工作.这个特殊情况现在快了17倍!

请记住,即使有了这些改进,选择器如:visible和:hidden也可能很昂贵,因为它们依赖于浏览器来确定元素是否实际显示在页面上.在最坏的情况下,这可能需要完全重新计算CSS样式和页面布局!虽然我们不鼓励在大多数情况下使用它们,但我们建议您测试页面以确定这些选择器是否会导致性能问题.

进一步扩展到您的特定用例,有一个内置的jQuery函数,名为$.fadeToggle():

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
}