隐藏DIV,直到使用visibility属性加载页面

Question

我有一个DIV(.container)和一个button(.btn),我想隐藏,直到页面完全加载.我设法通过在一个小jquery片段上使用dispay:none来做到这一点,但如果我可以使用visibillity会更好:隐藏因为页面不会移动(就像显示:) none.

基本上,我有:

<style>
    .container {visibility:hidden;}
    .btn {visibility:hidden;}
</style

是否有任何可以帮助我的好灵魂,jquery所以只有在页面完全加载后它才显示出来？

Answer 1

这是你需要做的

$(window).load(function() { 
    $('.container').css('visibility','visible');
    $('.btn').css('visibility','visible');
});

或者您也可以将一个类添加到容器中

$(window).load(function() { 
    $('.container').addClass("show");
});

然后为你的CSS

.container.show { visibility: visible; }
.container.show .btn { visibility:visible; }

您可以创建一个仅用于可见性的类,但要确保它在其他规则之后,以便它将覆盖它.像这样

.container {visibility:hidden;}
.btn {visibility:hidden;}

.my_class { visibility: visible; }

在这种情况下的jquery将是

$(window).load(function() { 
    $('.container').addClass("my_class");
});