jquery - 在页面加载时禁用透明 div 并希望在页面加载后显示

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()
});