Is there a way to load columns one by one with a time gap when the page is loaded? Here's the code snippet that can achieve this:
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>Alternatively, is there a simpler way to achieve this effect with fade or other animations? Any suggestions would be greatly appreciated.
Thank you in advance