console
$(document).ready(function(){
animate();
$(".play").click(animate).mouseover(function(){
$(".play").css({"background-color":"#A55"});
}).mouseout(function(){
$(".play").css({"background-color":"#060"});
});
});
function animate(){
$('div>div>div').each(function(id){
$(this).css({
position: 'relative',
top: '-200px',
opacity: 0
});
console.log(123);
var wait = Math.floor((Math.random()*3000)+1);
$(this).delay(wait).animate({
top: '0px',
opacity: 1
},1000);
});
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class='content'>
<div style='padding-right:40px'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div style='padding-right:20px'>
<div></div>
<div></div>
<div style='margin-right:122px'>
</div>
</div>
<div>
<div></div>
<div></div>
<div style='margin-right:142px'></div>
</div>
<div>
<div></div>
<div style='margin-right:82px' class="play"></div>
<div class="play"></div>
<div style='margin-right:42px'></div>
</div>
<div>
<div></div>
<div style='margin-right:62px' class="play"></div>
<div class="play"></div>
<div class="play"></div>
<div style='margin-right:42px'></div>
</div>
<div>
<div></div>
<div style='margin-right:42px' class="play"></div>
<div class="play"></div>
<div class="play"></div>
<div class="play"></div>
<div style='margin-right:42px'></div>
</div>
<div>
<div></div>
<div style='margin-right:62px' class="play"></div>
<div class="play"></div>
<div class="play"></div>
<div style='margin-right:42px'></div>
</div>
<div>
<div></div>
<div style='margin-right:82px' class="play"></div>
<div class="play"></div>
<div style='margin-right:42px'></div>
</div>
<div>
<div style='margin-right:22px'></div>
<div style='margin-right:142px'></div>
</div>
<div>
<div style='margin-right:42px'></div>
<div></div>
<div style='margin-right:102px'></div>
</div>
<div>
<div style='margin-right:62px'></div>
<div></div>
<div style='margin-right:82px'></div>
</div>
<div>
<div style='margin-right:42px'></div>
<div></div>
<div style='margin-right:102px'></div>
</div>
<div>
<div style='margin-right:22px'></div>
<div></div>
<div style='margin-right:122px'></div>
</div>
<div>
<div></div>
<div></div>
<div style='margin-right:142px'></div>
</div>
<div>
<div></div>
<div style='margin-right:162px'></div>
</div>
</div>
body{
margin:50px;
background-color:#2C3437;
}
.content{
display:inline-block;
width:350px;
height:239px;
margin-right:-4px;
}
.play{
cursor:pointer;
background-color:#060;
}
div>div{
display:block;
height:20px;
}
div>div>div{
width:16px;
height:16px;
background-color:#FFF;
display:inline-block;
float:right;
margin:2px;
}