Trying to get a time delay between loops in a for loop
This is my content div in my html file:
<div class="content">
<img id="img0" src="images/Snow_White.png" />
<img id="img1" src="images/Snow_White.png" />
<img id="img2" src="images/Snow_White.png" />
<img id="img3" src="images/Snow_White.png" />
<img id="img4" src="images/Snow_White.png" />
<img id="img5" src="images/Snow_White.png" />
<img id="img6" src="images/Snow_White.png" />
<img id="img7" src="images/Snow_White.png" />
<img id="img8" src="images/Snow_White.png" />
<img id="img9" src="images/Snow_White.png" />
<img id="img10" src="images/Snow_White.png" />
<img id="img11" src="images/Snow_White.png" />
<img id="img12" src="images/Snow_White.png" />
<img id="img13" src="images/Snow_White.png" />
<img id="img14" src="images/Snow_White.png" />
<img id="img15" src="images/Snow_White.png" />
<img id="img16" src="images/Snow_White.png" />
<img id="img17" src="images/Snow_White.png" />
<img id="img18" src="images/Snow_White.png" />
<img id="img19" src="images/Snow_White.png" />
<img id="img20" src="images/Snow_White.png" />
<img id="img21" src="images/Snow_White.png" />
<img id="img22" src="images/Snow_White.png" />
<img id="img23" src="images/Snow_White.png" />
<img id="img24" src="images/Snow_White.png" />
<img id="img25" src="images/Snow_White.png" />
<img id="img26" src="images/Snow_White.png" />
<img id="img27" src="images/Snow_White.png" />
<img id="img28" src="images/Snow_White.png" />
<img id="img29" src="images/Snow_White.png" />
<img id="img30" src="images/Snow_White.png" />
</div>
This is the content of my js file:
$(document).ready(function() {
$("#img0").css({"position":"absolute", "display":"inherit", "height": "100px", "top": "0px", "left": "0px"});
$("#img0").click(function() {
for(i=1;i<35;i++) {
setTimeout(showImg(i), 50);
}
});
function showImg(i) {
var top, left, height;
if(i < 31) {
if(i > 22) {
top = (360 - (15 * (i - 20))).toString() + 'px';
left = (600 - (30 * (i - 20))).toString() + 'px';
}
else if(i > 20) {
top = (300 + (15 * (i - 20))).toString() + 'px';
left = (600 - (30 * (i - 20))).toString() + 'px';
}
else {
top = (i * 15).toString() + 'px';
left = (i * 30).toString() + 'px';
}
height = (100 + (10 * i)).toString() + 'px';
$("#img" + i.toString()).css({"position":"absolute", "display":"inherit", "height": height, "top": top, "left": left});
}
if(i > 4) {
$("#img" + (i-5).toString()).css("display","none");
}
}
});
I am trying to get a 50 ms delay between the showing of images, but the entire process occurs instantaneously. I have worked on this for a while now with no improvement on the situation. Any help would be highly appreciated. Thanks in advance for any help.