<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <p>Demonstrate fadeToggle() with different speed parameters.</p> <button class="btn btn-default">Click to fade in/out boxes</button><br><br> <div id="div1" class="card SkyBlue"></div> <div id="div2" class="card Crimson"></div> </div> </div>

.card { box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); width: 100px; height: 100px; margin-bottom: 2em; border-radius: 0.5em; } .SkyBlue { background-color: Crimson; } .Crimson { background-color: SkyBlue; }

$(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle("3000"); }); });