"Learning JQuery"
Bootstrap 3.3.0 Snippet by ryanorr

<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)]; }); });

Related: See More


Questions / Comments: