<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <main id="main"> <section class="first_screen"> <h1> First Screen </h1> </section> <section class="second_screen"> <h1> Second Screen </h1> </section> <section class="third_screen"> <h1> Third Screen </h1> </section> <section class="last_screen"> <h1> Last Screen </h1> </section> </main>

.first_screen { display:block; } .second_screen, .third_screen, .last_screen{ display:none; } .first_screen, .second_screen, .third_screen, .last_screen{ padding-top:50px; height:500px; background:#f33; display:block; text-align:center; } .second_screen { background:yellow; } .third_screen { color:#fff; background:#333; } .last_screen { color:#fff; background:blue; }

$(document).ready(function() { $(".first_screen").delay(2000).fadeOut(500,function(){ $(".second_screen").fadeIn(1000).show().delay(2000).fadeOut(500,function(){ $(".third_screen").fadeIn(1000).show().delay(2000).fadeOut(500,function(){ $(".last_screen").fadeIn(300).show(); }); }); }); });