Question

我已经制作了一个透明的div来显示主页的主要文本比我网站主页的其他文本更明亮。代码为div

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

我在主页中使用这个div：

 <div id="transparentdiv">

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

但是在页面加载透明div的时候出现的问题是首先加载看起来不太好。所以我只是想在页面的其他内容加载后最后加载这个透明的div。

Answer 1

将display:none添加到此div。

#transparentdiv{
    display: none;
    /* other styles */
}

然后使用jQuery：

$(function(){
    $('#transparentdiv').show();
});

Answer 2

最简单的方法是最初隐藏div：

<div id="transparentdiv" style="display:none;"> ....

然后在页面加载时，将该css更改为＆＃34; display：block＆＃34;使用javascript / jquery。

例如。

$(document.ready(function(){
    $("#transparentdiv").css("display","block");
});

谢谢， Ronak

Answer 3

您可以先尝试隐藏div，然后再显示超时。（500代表0.5秒）

$("#transparentdiv").hide();

setTimeout(function() {
   $("#transparentdiv").fadeIn();
}, 500);

试试这个。

Answer 4

无法在评论中添加完整的详细信息。所以将此作为新答案发布：

确定。然后你可以使用两种不同的css用于2种不同的状态。在第一个css中，我们可以用class＆＃34; less＆＃34 ;,将背景不透明度和字体颜色更改为非常轻，就好像它们是透明的一样。在第二个css中，让我们说一下＆＃34;更多＆＃34;，将透明度改为正常。

申请＆＃34; less＆＃34;默认为你的div。

    #transparentdiv.less {
    position:absolute;
    width:852px;
    background-color:rgba(0,0,0,.1);
    border-radius:8px;
     color: rgba(0,0,0,.1);   
    } 

    #transparentdiv.more 
{
    position:absolute;
    width:852px;    
    background-color:rgba(0,0,0,.3);
    border-radius:8px;
       }

然后使用jquery添加＆＃34;更多＆＃34;加载课程。演示here

如何在页面加载后加载透明div

4 个答案: