Javascript 隐藏div而不首先显示它

有没有办法隐藏div而不先加载它，当我想隐藏div时，它先显示0.5秒，然后隐藏它自己，然后做下面的动画，它看起来很难看，有没有办法避免这种情况，或者我使用js的方式不对

$( document ).ready(function() {
    $('.errors').hide(1);
    $('.errors1').hide(1);
});
$( document ).ready(function() {
    $('.errors').animate({width: 'show'},1000);
    $('.errors1').animate({width: 'show'},1000);
});

---

将以下规则添加到css文档中：

.errors {
    display: none;
}

使用CSS

.errors, .errors1 {
    display: none;
}

.errors, .errors1 {
    display: none;
}

您可以从JS中删除

$( document ).ready(function() {
    $('.errors').hide(1);
    $('.errors1').hide(1);
});

---

使用css进行隐藏。然后在需要时展示

CSS:

JS（显示div）：

内联样式（不推荐）

错误消息

答案很好，您必须在CSS上定义要“隐藏”的div。只是一个关于你为什么要这么做的传统解释

这与css的呈现方式有关。正如在这里的另一篇帖子中所指出的：

参考：

浏览器以流的形式读取HTML标记，并将它可以应用的规则应用到它迄今为止看到的元素

因此，这意味着一旦浏览器知道元素存在，就会应用css样式。因此，您的

display:none

语句将立即呈现，您甚至无法看到它前面的div

另一方面，Js的工作方式不同。虽然它可以在加载页面之前执行一些操作，但它与元素（如

div

）的交互必须等待页面呈现完成。这就是为什么您必须定义：

$( document ).ready(function() {

它告诉浏览器先呈现文档，然后在文档准备就绪时执行javascript函数。。。因此，这就是为什么您可以看到div一小会儿，然后JS将其隐藏

因此，是的，为了从一开始就隐藏它，您必须使用CSS：

<div class="errors" style="display:none;">ERROR MSG</div>

$( document ).ready(function() {

.errors, .errors1 {
    display: none;
}