Boxes appear after time

by Marius Jopen

HTML

<div class="red">
RED
</div>

<div class="pink">
PINK
</div>

<div class="blue">
BLUE
</div>

CSS

div {
  height: 50px;
  width: 50px;
  position: absolute;
  display: none;
  transition: 0.5s ease;
  background: black;
}

.red {
  background: red;
}

.pink {
  background: pink;
}

.blue {
  background: blue;
}

.add {
  display: block !important;
}

JavaScript

$(document).ready(function() {
  var ww = $(window).width();
  var wh = $(window).height();
  var rx = Math.floor((Math.random() * ww) + 1);
  var ry = Math.floor((Math.random() * wh) + 1); 
  $(".red").css({top: ry, left: rx}); 
});

$(document).ready(function() {
  var ww = $(window).width();
  var wh = $(window).height();
  var rx = Math.floor((Math.random() * ww) + 1);
  var ry = Math.floor((Math.random() * wh) + 1); 
  $(".pink").css({top: ry, left: rx}); 
});

$(document).ready(function() {
  var ww = $(window).width();
  var wh = $(window).height();
  var rx = Math.floor((Math.random() * ww) + 1);
  var ry = Math.floor((Math.random() * wh) + 1); 
  $(".blue").css({top: ry, left: rx}); 
});


var timeoutidred = 0;
$(window).mousemove(function() {
    clearTimeout(timeoutidred);
    timeoutid = setTimeout(redadd, 3000);
});

function redadd() { 
  $('.red').addClass('add');
}


var timeoutidpink = 0;
$(window).mousemove(function() {
    clearTimeout(timeoutidpink);
    timeoutid = setTimeout(pinkadd, 6000);
});

function pinkadd() { 
  $('.pink').addClass('add');
}


var timeoutidblue = 0;
$(window).mousemove(function() {
    clearTimeout(timeoutidpink);
    timeoutid = setTimeout(blueadd, 9000);
});

function blueadd() { 
  $('.blue').addClass('add');
}