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

【问题标题】：How to load a transparent div after the page load如何在页面加载后加载透明 div
【发布时间】：2014-06-17 06:12:12
【问题描述】：

您好，我制作了一个透明的 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。

【问题讨论】：

标签： jquery css

【解决方案1】：

将display:none 添加到此 div。

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

然后使用jQuery：

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

【讨论】：

也可以在页面加载后动态创建！
@AminJafari div 内容必须来自后端（php）。

【解决方案2】：

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

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

然后在页面加载时，使用 javascript / jquery 将该 css 更改为“display:block”。

例如。

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

谢谢，罗纳克

【讨论】：

感谢您的回复我使用了您的方法，但它只是禁用了屏幕上的整个 div，甚至是其中的内容，正如我所说，我在主页上有两个标题，我想在整个页面上显示在该透明 div 可能加载后加载以使这些标题变亮
在下方添加了新答案

【解决方案3】：

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

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

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

试试这个。

【讨论】：

【解决方案4】：

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

好的。然后你可以为 2 个不同的状态使用两个不同的 css。在第一个 css 中，让我们说“less”类，将背景不透明度和字体颜色更改为非常轻，就好像它们是透明的一样。在第二个 CSS 中，让我们说“更多”类，将透明度更改为正常。

默认情况下将“less”类应用于您的 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 在加载时添加“更多”类。演示here

【讨论】：