隐藏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");
});

Answer 2

你可以试试这个：

使用Javascript：

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

CSS：

.visible { visibility: visible; }

希望能帮到你！

Answer 3

不要过度思考它！ ：）

$(function() {
    $('.container').show(); // show .container and .btn
    $('.btn').show();
});

Answer 4

你尝试过这样的事吗？

$(document).ready( function() {
  $(".container).show( "fast" );
}