try using
Window setInterval() Method[
^] to see the transition in real time ( load one after another )
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
.divclass {
height: 100px;
width: 200px;
background-color: green;
border: 5px solid red;
display: none;
}
</style>
<script>
$(document).ready(function () {
var divs = $("[id^=show]");
var i = 0;
var loop = window.setInterval(function () {
i++;
$(divs[i]).fadeIn(1000);
if (i == divs.length)
clearInterval(loop);
}, 1000);
});
</script>
</head>
<body>
<div id="show1" class="divclass">show1</div> <br />
<div id="show2" class="divclass">show2</div> <br />
<div id="show3" class="divclass">show3</div> <br />
<div id="show4" class="divclass">show4</div> <br />
<div id="show5" class="divclass">show5</div> <br />
</body>
</html>
demo:
Edit fiddle - JSFiddle[
^]