<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ---------->
<p>Demonstrate fadeIn() with different parameters.</p>
<button type="button" class="btn btn-warning"> Click to fade in boxes</button><br><br>
<div class="row">
<div class="col-sm-1">
<div id="div1"></div>
</div>
<div class="col-sm-1">
<div id="div2"></div>
</div>
<div class="col-sm-1">
<div id="div3"></div>
</div>
<div class="col-sm-1">
<div id="div4"></div>
</div>
<div class="col-sm-1">
<div id="div5"></div>
</div>
<div class="col-sm-1">
<div id="div6"></div>
</div>
<div class="col-sm-1">
<div id="div7"></div>
</div>
<div class="col-sm-1">
<div id="div8"></div>
</div>
</div>
<p id="randomItem"></p>
#div1 {
width:80px;
height:80px;
background-color:red;
}
#div2 {
width:80px;
height:80px;
background-color:green
}
#div3 {
width:80px;
height:80px;
background-color:blue
}
#div4 {
width:80px;
height:80px;
background-color:yellow
}
#div5 {
width:80px;
height:80px;
background-color:purple
}
#div6 {
width:80px;
height:80px;
background-color:black
}
#div7 {
width:80px;
height:80px;
background-color:pink
}
#div8 {
width:80px;
height:80px;
background-color:orange
}
//
$(document).ready(function(){
$("button").click(function(){
var myDiv = $("#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8");
var myArray = ["red", "green", "blue", "yellow", "purple", "black", "pink", "orange"]
myDiv.animate({height: '400px', opacity: '1'}, "fast");
myDiv.animate({width: '100px', opacity: '1'}, "fast");
myDiv.animate({height: '0px', opacity: '0'}, "fast");
myDiv.animate({width: '0px', opacity: '0'}, "fast");
myDiv.animate({height: '400px', opacity: '1'}, "fast");
myDiv.animate({width: '100px', opacity: '1'}, "fast");
$("#div1").css("background-color", randomItem);
randomItem = myArray[Math.floor(Math.random(0,7)*myArray.length)];
$("#div2").css("background-color", randomItem);
randomItem = myArray[Math.floor(Math.random(0,7)*myArray.length)];
$("#div3").css("background-color", randomItem);
randomItem = myArray[Math.floor(Math.random(0,7)*myArray.length)];
$("#div4").css("background-color", randomItem);
randomItem = myArray[Math.floor(Math.random(0,7)*myArray.length)];
$("#div5").css("background-color", randomItem);
randomItem = myArray[Math.floor(Math.random(0,7)*myArray.length)];
$("#div6").css("background-color", randomItem);
randomItem = myArray[Math.floor(Math.random(0,7)*myArray.length)];
$("#div7").css("background-color", randomItem);
randomItem = myArray[Math.floor(Math.random(0,7)*myArray.length)];
$("#div8").css("background-color", randomItem);
randomItem = myArray[Math.floor(Math.random(0,7)*myArray.length)];
});
});
