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

您正在寻找：

.is(':visible')

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

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

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

jQuery 3

:visible因为必须遍历DOM树检查一堆元素而成为一个相当慢的选择器。然而，jQuery 3有个好消息，因为this post解释了（ Ctrl + F for :visible）：

感谢Paul Irish在谷歌的一些侦探工作，我们发现了一些情况，当我们在同一个文件中多次使用自定义选择器时，我们可以跳过一堆额外的工作。那个特例现在快了17倍！

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

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

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

Answer 2

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

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

Here's a demo.

Answer 3

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

使用jQuery检测元素是否可见

3 个答案:

jQuery 3