使用jQuery检测元素是否可见

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

我如何检测元素是否可见?

508695 次浏览
小开
最佳答案

你正在寻找:

.is(':visible')

尽管考虑到你在其他地方使用jQuery，你可能应该改变你的选择器:

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

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

jQuery 3

:visible被认为是一个非常缓慢的选择器，因为它必须遍历DOM树，检查一堆元素。jQuery 3有个好消息，正如这篇文章所解释的(Ctrl + F为:visible):

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

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

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

function toggleTestElement() {
$('#testElement').fadeToggle('fast');
}
小开 
if($('#testElement').is(':visible')){
//what you want to do when is visible
}
小开

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

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

这是一个演示


提交答案