Box moves along the border

by Marius Jopen

HTML

<div class="box b-1">
</div>
<div class="box b-2">
</div>

CSS

.box {
  height: 20px; 
  width: 20px; 
  position: absolute; 
}

.b-1 {
    background-color: red; 

}

.b-2 {
    background-color: yellow; 

}

JavaScript

$(function() {	

	var wh = $( window ).height();
  var ww = $( window ).width();
  
  var unit = "%";
  var speed = 10;
  
  var sy = wh * speed;
  var sx = ww * speed;
  
  var right = 90;
  var bottom = 90;
  var left = 0;
  var top = 0;

	$(".b-1").animate({ "left" : right+unit }, sx, 'linear');
	$(".b-1").animate({ "top" : bottom+unit }, sy, 'linear');
	$(".b-1").animate({ "left" : left+unit }, sx, 'linear');
  $(".b-1").animate({ "top" : top+unit }, sy, 'linear');
  
	$(".b-2").animate({ "left" : right+unit }, sx, 'linear');
	$(".b-2").animate({ "top" : bottom+unit }, sy, 'linear');
	$(".b-2").animate({ "left" : left+unit }, sx, 'linear');
  $(".b-2").animate({ "top" : top+unit }, sy, 'linear');
  
  
});