是否在页面加载时隐藏div？

Question

所以我有一个div，加载起来很有趣，我的客户有点担心，但我想帮助他们。

有没有一种方法可以用jQuery在设定的时间内隐藏一个div？可能只是在页面加载时不透明:0，然后2秒后，将其更改为不透明: 1。

另一种方法可能是添加/删除类方法。我只是不确定在页面加载时让它处于一种状态，然后无限期地处于另一种状态(当然，除非页面被刷新)，这样的代码应该是什么样子的

jQuery('#DIV').WHILELOADING(function() {
    jQuery('#DIV').addClass('hidden_div')
});

jQuery('#DIV').AFTER_2_SECONDS(function() {
    jQuery('#DIV').removeClass('hidden_div')
});

我只是不“完全”确定如何做到这一点。还有，一个“加载屏幕”，我知道怎么做，是不可能的，哈哈。:P

Answer 1

div是如何加载的，如果是页面加载，那么只需在页面加载时隐藏div，并在其中显示div

  jQuery(window).load (function () { 
      jQuery('#DIV').removeClass('hidden_div')
  });

如果您使用.load (ajax调用)加载div，则使用.load回调来显示div。

jQuery('#DIV').load('<URL>', function() {
   jQuery('#DIV').removeClass('hidden_div')
});

以上两个假设你已经像下面这样隐藏了div，

<div id="DIV" class="hidden_div"><!-- div content --> </div>

注意：添加延迟可能不会得到一致的结果。例如:如果延迟是5秒，页面需要10秒才能加载，那么你也会遇到同样的问题。

它是由

生成的超文本标记语言加载的，而不是jQuery。我正在关注第一个评论，所以是这样的吗？"jQuery('#DIV').delay(1000).removeClass('hidden_div');“

如果是php生成的代码，那么在生成代码的末尾回显removeClass代码。

Answer 2

为了避免加载时出现闪烁，我建议使用CSS进行初始隐藏

#div { display: none; }

然后使用JS显示div

function showDiv() {
    $('#div').show();
}

setTimeout(showDiv, 2000);

Answer 3

最初，您可以通过jquery (或CSS，但这是大多数人不喜欢做的事情)隐藏它，然后调用show方法，一旦页面加载完成，您可以尝试将其包装：

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

然后到页面的底部(尽管实际上在哪里并不重要)：

  $(window).load(function(){
    $("#DIV").show(); or .fadeIn();
  });