I have a query regarding JQuery related to randomly placing divs on a webpage. The issue I'm facing is that it currently does this indefinitely.
Is there a way to make it run for a specific duration and then stop?
$(document).ready(function () {
makeDiv();
var count = 1;
function makeDiv() {
count ++;
while (count < 50){
var numRand = Math.floor(Math.random() * 501);
var divsize = 100;
var posx = (Math.random() * ($('body').width() - divsize)).toFixed();
var posy = (Math.random() * ($('body').height() - divsize)).toFixed();
$newdiv = $("<div class='exploding'></div>").css({
'left': posx + 'px',
'top': posy + 'px'
});
$newdiv.appendTo('body').delay(2000).fadeIn(100, function () {
//$(this).remove();
makeDiv();
});
}
}
});
body, html {
width: 960;
height: 100%;
}
div.box {
position: relative;
width: 100px;
height: 100px;
}
div.exploding {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
}