使用jQuery检测元素是否可见

使用.fadeIn().fadeOut(),我一直在页面上隐藏/显示一个元素,但是有两个按钮,一个用于隐藏,一个用于显示。我现在想要 按钮来同时切换 。

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

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

function showTestElement() {

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

}

function hideTestElement() {

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

}

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

function toggleTestElement() {

if (document.getElementById('testElement').***IS_VISIBLE***) {

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

} else {

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

}

}

如何检测元素是否可见?

回答:

您正在寻找:

.is(':visible')

尽管您可能考虑到仍在其他地方使用它,但应该将选择器更改为使用jQuery:

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

// Code

}

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

jQuery 3

:visible一直以选择器速度较慢而著称,因为它必须遍历检查一堆元素的DOM树。但是,对于jQuery3来说有个好消息,

多亏了Google的Paul

Irish的一些侦探工作,我们发现某些情况下,当在同一文档中多次使用自定义选择器如:visible时,我们可以跳过很多额外的工作。现在,该特定案例的速度提高了17倍!

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


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

function toggleTestElement() {

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

}

以上是 使用jQuery检测元素是否可见 的全部内容, 来源链接: utcz.com/qa/408690.html

回到顶部