jquery - 如何在使用 jQuery 加载页面之前隐藏 HTML 元素

Question

我有一些显示或隐藏 div 的 JQuery 代码。

$("div#extraControls").show();   // OR .hide()

我最初希望 div 不可见，所以我使用了:

$(document).ready(function() {
    $("div#extraControls").hide();
});

但是，在浏览器上，内容加载后会显示一秒钟然后消失，这不是我想要的。

如何在页面加载前设置隐藏元素，同时保持使用脚本动态显示隐藏元素的能力？

Answer 1

div.hidden
{
   display: none
}

<div id="extraControls" class="hidden">
</div>

$(document).ready(function() {
    $("div#extraControls").removeClass("hidden");
});