Sanjeev K Sanjeev K - 3 months ago 6
CSS Question

Show div one by one on page load using jQuery/CSS

I have a page with multiple bootstrap columns, what I am trying is to appear the first six

div
which has
class=inner
to appear one by one when page load, this is what I have created here in JsFiddle

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
overflow: hidden;
}
.main-wrapper {
float: left;
width: 100%;
background: #cccccc;
}
.row {
border-bottom: 1px solid #444;
}
.col-md-3 {
border: 1px solid #444;
}
.overflowH {
overflow: hidden;
}
</style>

<script type='text/javascript'>
window.onload=function(){
function setHeight() {
windowHeight = $(window).innerHeight();
$('.fullH').css('height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
$('.col-md-3').height( Math.round( $('.col-md-3').width() ) * Math.tan(0.523599) );
$('.row').css('transform', 'skewY(-20deg)');
}
</script>
<div class="main-wrapper">
<div class="container-fluid">
<div class="row fullH overflowH">
<div class="col-md-3">
<div class="inner">Text Here</div>
</div>
<div class="col-md-3">
<div class="inner">Text Here</div>
</div>
<div class="col-md-3">
<div class="inner">Text Here</div>
</div>
<div class="col-md-3">
<div class="inner">Text Here</div>
</div>
<div class="col-md-3">
<div class="inner">Text Here</div>
</div>
<div class="col-md-3">
<div class="inner">Text Here</div>
</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
</div>
</div>
</div>

Answer

css add: .col-md-3.show { opacity: 1; transition: .2s; } javascript add:

$(".col-md-3").each(function(index) {
    var $this = $(this);
    setTimeout(function () { $this.addClass("show"); }, index * 200);
  });

try: https://jsfiddle.net/snuu1958/7/

Comments