jQuery .is（“：visible）绝对位于视口之外的元素

Question

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

我在视口的左侧有一个侧边栏。单击“边栏按钮”时，“边栏”会在可见区域之外进行动画处理。

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现在根本不可见（对我而言），并且sidebar的左侧位置大于document.width，所以我的问题是我可以像这样获取（sideBar）的可见状态：

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

或者，还有更好的方法？我的意思是jQuery如何确定某个元素是否可见？

Answer 1

引用jQuery 本身

如果元素占用了文档中的空间，则它们被视为可见。可见元素的宽度或高度大于零。

具有visibility:hidden或opacity:0的元素被认为是可见的，因为它们仍然占用布局中的空间。

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

要检查侧边栏是否可见，您必须自己完成一些（不是那么）复杂的计算，或者只需在侧边栏消失时添加类或数据属性，就像您已经使用类完成的那样outof。