javascript - 更改样式属性时 DIV 未在 Chrome 中显示

Question

好的，我正在使用 JQuery 来显示/隐藏页面上的“处理中”div 元素。下面是基本代码:

function ShowLoading(){
    $(divLoadingPanel).show();
}

function HideLoading(){
    $(divLoadingPanel).hide();
}   

在我的各种 Javascript 函数中，我根据需要调用 ShowLoading() 和 HideLoading()。在 FireFox 中查看页面时，一切正常。在 Chrome 中查看时，从未看到加载面板。但是，如果我调试并在面板之后的行中断应该是 显示，它在那里。手动运行代码时它会显示正常，但如果我不使用断点和调试器则不会。这让我很困惑。这是 div 本身的代码:

<div id="divLoadingPanel" class="Loading_Panel" style="display: none">
    <br>
    <img src="./images/8.gif">
    <br><br>
    <font class="Loading_Text">Processing...</font>
</div>

最后，这是面板的类信息:

.Loading_Panel {
    position:fixed;
    top: 50%;
    left: 50%;
    width:300px;
    height:150px;
    margin-top: -75px;
    margin-left: -150px;
    background: #E9F2FA;
    border-radius: 10px;
    border: 1px solid #1C4E7C;
}

如有任何帮助，我们将不胜感激。

Answer 1

将您的代码更改为:

 function ShowLoading(){
     $("#divLoadingPanel").show();
 }

 function HideLoading(){
     $("#divLoadingPanel").hide();
 }