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

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

#div { display: none; }

然后显示div使用JS

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

setTimeout(showDiv, 2000);

Answer 2

如何加载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秒才能加载，那么您将遇到同样的问题。

它只是由PHP生成的HTML加载，而不是jQuery。我正在关注第一条评论，这样的事情呢？ “jQuery的（ '＃DIV'）延迟（1000）.removeClass（ 'hidden_div'）;”

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

Answer 3

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

中

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

然后到你页面的底部（尽管真的无关紧要）：

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

Answer 4

$(document).ready(function(){

  $('#div')
    .css({opacity:0}) /*set opacity to 0*/
    .delay(2E0) /*wait 2 seconds*/
    .animate({opacity:1}); /*animate in opacity*/

});

可选地，

$(document).ready(function(){

  $('#div')
    .css({opacity:0}) /*set opacity to 0*/

  //wait for body to load
  $('body').bind('load', function(){
    $('#div').animate({opacity:1}); /*animate in opacity*/
  });

});

Answer 5

此代码来自delay()

上的jquery api网站

$('#myDiv').slideUp(300).delay(800).fadeIn(400);

jsfiddle：http://jsfiddle.net/NNQ4f/

Answer 6

为什么不将div的显示属性设置为＆＃39; none＆＃39;然后当文件加载时显示div？

<div id="mydiv" style="display:none;"> </div>



$(document).ready(function() {
$('#mydiv').show();
});

Answer 7

我最初会隐藏div，然后你可以设置一个计时器来移除类或者使用.fadeTo来慢慢显示它（其他finagling，不只是交换它，你还必须设置不透明度设置）。但是，在我个人看来，我认为页面可能会被用来重新设计，以便在第一次看起来正确或找到一些其他非时钟导向的时序方案，以便在偶数发生后改变视图。

类似的东西：

<script type="text/javascript">
    $(document).ready( function (){
    setTimeout($('#DIV').removeClass('hide'), 3000);
    });
</script>
<style type="text/css">
    div#DIV .hide {
        display: none !important;
    }
</style>

[...]

<div id="DIV" class="hide"></div>

语法未经验证。

干杯， - M

Answer 8

首先，为非js用户设置内容：

<body class="no-js">
  <div id="div">Content</div>
</body>

然后，删除class并显示容器。

$(document).ready(function() {
  // Remove no js class
  $('body').removeClass('no-js');
  // Show and animate div container
  $('#div').hide().delay(2000).fadeIn();
});

Answer 9

jsFiddle Example

我会使用$(document).ready();添加您的css类，然后使用$(window).load();删除它。

$(document).ready(function(){
    $('#DIV').addClass('hidden_div');
});
$(window).load(function(){
    $('#DIV').removeClass('hidden_div');
});

Answer 10

这里的所有方法都不起作用，我测试了它们。在用户可以看到之前，Jquery太慢而无法隐藏某些东西，因为代码必须在DOM就绪函数中。最简单快捷的方法：将需要隐藏的元素放在div中，并在此div的顶部添加一个js以在loding期间隐藏它，这种方式对于没有启用js的用户也是安全的！（在例如chrome，ff，最新版本05.2013中测试）：

隐藏div的示例：

<div id="content">
     <script type="text/javascript">
          // Get the div and hide it
          var div = document.getElementById('content');
          div.style.display = 'none';
          //Shows the div as soon as the page is loaded
          window.onload = function () {
          div.style.display = 'block';}
     </script>
     // Content that needs to be hidden
</div>

干杯

页面加载时隐藏div？

10 个答案: