Question

我试图找出这是否是获得具有position: absolute的div容器的可见性状态的正确方法。

我的视口左侧有一个侧边栏。点击＆＃34;侧边栏按钮＆＃34; ＆＃34; sideBar＆＃34;从可见区域中获取动画效果。

jQuery：

$('#sideBarButton').click(function(){
    sidebar = $("#sideBar").outerWidth();
    if(!$("#sideBar").hasClass('outof'))
    {
       $("#sideBar").animate({left: screenW},100).addClass('outof');
       $("#boardContent").animate({width: screenW},200);
       $("#sideBarButton").animate({left: "+=" + (sidebar -3)},100);
    }
    else 
    {
       $("#boardContent").animate({width: bcW}, 50);
       setTimeout(function(){
           $("#sideBar").animate({left: screenW - sidebar}, 200).removeClass('outof');
           $("#sideBarButton").animate({left: "-=" + (sidebar -3)},200);
       }, 120);
    }
    $(this).find('img').toggle();
});

由于sideBar现在根本看不到（对于我的眼睛）并且侧边栏的左侧位置比document.width大，我的问题是我是否可以得到（sideBar）的可见性状态：

if($("#sideBar").is(":visible"))...

还是有更好的方法？我的意思是jQuery如何决定一个元素是否可见？

Answer 1

引用jQuery itself

如果元素占用文档中的空间，则认为元素是可见的。   可见元素的宽度或高度大于零。

具有可见性的元素：隐藏或不透明度：0被视为可见，   因为他们仍然在布局中消耗空间。

因此，在可见的情况下，jQuery不会考虑从视口中拉出的元素。例如。如果向下滚动页面，标题仍然可见，但您无法用眼睛看到它。

要检查侧边栏是否可见，有些（不是那么）复杂的计算必须由您自己完成，或者只是在侧边栏外出时添加类或数据属性，就像您已经使用{{1}完成的那样} class。

Answer 2

这是一个小测试我跑来向您展示问题的结果：http://jsfiddle.net/dBgT3/

<强> HTML

<div id="visible"></div>
<div id="hidden"></div>
<div id="offScreen"></div>

<强>的jQuery

$('div').each(function(){
    $('body').append('#' + $(this).attr('id') + ' - ' + $(this).is(':visible') + '<br />');
});

<强> CSS

#hidden {
    display: none;
}

#offScreen {
    position: absolute;
    left: -1000px;
}

<强>结果

#visible - true
#hidden - false
#offScreen - false

如果元素在屏幕外，它看起来你是正确的，它返回false。希望这有帮助！

修改如果位于屏幕外的元素具有设定的宽度或高度，则结果将发生变化。

<强> CSS

div { height: 1px; width: 1px; }

新结果

#visible - true #hidden - false #offScreen - true

感谢giorgio指出这一点！

Answer 3

来自jQuery的文档：

如果元素占用文档中的空间，则认为元素是可见的。   可见元素的宽度或高度大于零。

具有可见性的元素：隐藏或不透明度：0被视为可见，   因为他们仍然在布局中消耗空间。

文档中没有的元素被认为是隐藏的;   jQuery没有办法知道它们何时可见   附加到文档，因为它取决于适用的样式。

这意味着使用左/右或左边距/右边距，使用＆＃34;：visible＆＃34;选择。我认为你需要检查这些值（例如，如果你使用左/右，使用这样的东西：

if($("#sideBar").css("left") < 0)...  //(maybe parseInt will be needed here)
if(parseInt($("#sideBar").css("left")) < 0)...

我将使用css类并检查该类是否已经应用。例如＆＃34; .slide-out＆＃34; class将具有隐藏侧边栏所需的值，如果该类在元素中，那么它将被隐藏＆＃34;。

if($("#sideBar").hasClass("slide-out"))...

此外，如果您打算使用＆＃34; left＆＃34;财产，也许你需要看看＆＃34; position（）。left＆＃34;

$("#sideBar").position().left

Answer 4

通过很少的测试，似乎:visible不会考虑屏幕上是否有项目。

http://jsfiddle.net/7uLg7/

来自http://api.jquery.com/visible-selector/：

如果元素占用文档中的空间，则认为元素是可见的。可见元素具有>大于零的宽度或高度。

具有可见性的元素：隐藏或不透明度：0被认为是可见的，因为它们仍占用布局中的空间。

文档中没有的元素被认为是隐藏的; jQuery没有办法知道它们在附加到文档时是否可见，因为它取决于适用的样式。

为了测试你的sideBar是否可见我认为你必须采取更难的路线，并考虑滚动值来测试它的位置和高度/宽度与用户窗口的大小。

jQuery .is（＆＃34;：visible）表示绝对位于视口外的元素

4 个答案: