Решение:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Create a New Pen</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<script>
$(document).ready(function() {
$('.balloon').each(animateDiv);
});
function makeNewPosition() {
// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
}
function animateDiv() {
var el = $(this);
var newq = makeNewPosition();
var oldq = $(el).offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$(el).animate({
top: newq[0],
left: newq[1]
}, speed, function() {
animateDiv.apply(this);
});
};
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = .04;
var speed = Math.ceil(greatest / speedModifier);
return speed;
}
</script>
</head>
<body>
<style>
.balloon {
width: 50px;
height: 50px;
background-color: red;
position: fixed;
}
</style>
<div class='balloon'></div>
<div class='balloon'></div>
<div class='balloon'></div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
</body>
</html>
