Sanjeev K Sanjeev K - 3 months ago 14
CSS Question

Loading bootstrap columns one by one on page load

I want to load the columns one by one with gap of few seconds when the page is loaded and to make this working, following the code:



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>





But I think there must be some other way to do it easily and with some effects like fade or something, can anybody please suggest?

thanks in advance

Answer

Try this from 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>

Comments