在页面加载时禁用透明div＆amp;想要在页面加载后显示

Question

我制作了一个透明的div，它在这个div上有一些文字显示，使它更亮。但问题是在第一次加载页面时这个div首先加载，这看起来不太好，所以我只是希望这个div应该在页面的所有其他内容加载后加载。

我在css中的div代码

#abc {
    position:absolute;
    top:228px;
    width:852px;
    height:160px;
    background-color:rgba(0,0,0,.3);
    border-radius:8px;
    }

我在我看来使用它作为

<div id="abc">
    <h1><?php echo Configure::read('SearchBarHeading');?></h1>
    <h2><?php echo Configure::read('SearchBarSubheading');?></h2>
</div>

那我怎么能先把它隐藏起来呢？稍后在页面加载时显示

Answer 1

使用CSS隐藏它，然后使用jQuery显示它

CSS

#abc {
    position:absolute;
    top:228px;
    width:852px;
    height:160px;
    background-color:rgba(0,0,0,.3);
    border-radius:8px;
    display: none;
    }

jQuery JS

$(document).ready(function() {
    $('#abc').show();  // or you can use .fadeIn()
});