Question

有没有办法隐藏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);
});

Answer 1

使用CSS

.errors, .errors1 {
    display: none;
}

你可以从你的JS中删除

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

JS Fiddle Demo

Answer 2

很好地回答你必须将div定义为在CSS上“隐藏”。只是为什么你必须这样做的附加解释。

它与如何呈现css有关。正如SO在另一篇文章中指出的那样：

参考：How is CSS applied by the browser, and are repaints affected by it?

浏览器将HTML标记作为流读取，并将其可以应用的规则应用到目前为止看到的元素。

因此，这意味着只要浏览器知道该元素存在，就会应用css样式。因此，您的display: none语句将立即呈现，您甚至无法在其前看到div。

另一方面，Js的工作方式不同。虽然它可以在加载页面之前执行某些操作，但它与元素的交互（例如div）必须等待页面呈现完成。这就是你必须定义的原因：

$( document ).ready(function() {

它告诉浏览器首先渲染文档，然后，当它是ready时，它可以执行javascript函数......所以，这就是为什么你可以看到一小段时间的div，以及然后JS隐藏它。

所以是的，为了从头开始隐藏它，你必须使用CSS：

.errors, .errors1 { display: none; }

Answer 3

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

.errors {
    display: none;
}

Answer 4

用css隐藏。然后在需要时显示。

CSS：

.errors {
    display: none;
}

JS（显示div）：

$( document ).ready(function() {
    $(".errors").fadeIn(200);
});

INLINE STYLE（不推荐）

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

隐藏div而不先显示它

4 个答案: