javascript - 在页面加载时一一加载 Bootstrap 列

Question

我想在加载页面时以几秒钟的间隔逐一加载列，并按照代码进行操作:

setTimeout(function()
    {
       $("#box1").removeClass("noDisplay");
    },1000);

 setTimeout(function()
    {
       $("#box2").removeClass("noDisplay");
    },1200);

 setTimeout(function()
    {
       $("#box3").removeClass("noDisplay");
    },1400);

.noDisplay{display:none;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
   <div class="col-xs-4 noDisplay" id="box1">Column 1 </div>
   <div class="col-xs-4 noDisplay" id="box2">Column 2 </div>
   <div class="col-xs-4 noDisplay" id="box3">Column 3 </div>
  </div>
</div>

但我认为必须有一些其他的方法可以轻松地做到这一点，并且可以使用一些效果，例如淡入淡出之类的，有人可以建议一下吗？

提前致谢

Answer 1

从 How to show each div, one by one on jquery? 试试这个

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
   <div class="col-xs-4 noDisplay" id="box1">Column 1 </div>
   <div class="col-xs-4 noDisplay" id="box2">Column 2 </div>
   <div class="col-xs-4 noDisplay" id="box3">Column 3 </div>
  </div>
</div>
<style>
.noDisplay{display:none;}
</style>

<script>
$(function() {
    showDiv();
});
function showDiv() {
    if($('.noDisplay:hidden').length) {
        $('.noDisplay:hidden:first').fadeIn();
        setTimeout(showDiv, 1000);
    }
}
</script>