<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<style type="text/css">
</style>
<script src="js/jquery.js"></script>
<script type="text/javascript">
</script>
</head>
<body id="ulp">
<input id="hid" value="1" type="hidden">
<div id="hide-me" class="test">0
</div>
</body>
</html>
.test {
position: relative;
width:200px;
height:100px;
margin-top:400px;
background:#000;
text-align:center;
vertical-align:middle;
-moz-box-shadow: 1px 4px 6px rgba(0,0,0,0.3);
-webkit-box-shadow: 1px 6px 4px rgba(0,0,0,0.3);
box-shadow: 1px 4px 6px rgba(0,0,0,0.3);
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.ty{
padding-top:20%;
}
$(document).ready(function() {
var i=0;
function increment(){
var $box = $(".test");
$box.animate({opacity: 0.0, bottom: '400px'}, 2000, setInvisible(this.id, i));
setTimeout(increment,2000);
i++;
};
increment();
});
function setInvisible(x, i) {
$(x).css({transition: 'all 0.5s cubic-bezier(0.25,0.46,0.45,0.94)'});
$(x).css('visibility', 'hidden');
var y = parseInt($("#hid").val(), 10);
if(i==y*2){
$("#ulp").empty();
$("#ulp").append("<div id='hide-me' class='test' style='display:none;'><p class='ty'>"+i+"</p></div>");
var newColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
$("#hide-me").css({background: newColor}, 2000);
$("#hide-me").fadeIn("slow");
$("#ulp").append("<input id='hid' value='1' type='hidden'>");
$("#hid").val(y+1)
if($("#hid").val()==12)
$("#hid").val(0);
}
}
