var pos = $('#center').position(),
radiusSat = $('#sat1').width() * 0.5,
radius = $('#center').width() * 0.5,
cx = pos.left + radius,
cy = pos.top + radius,
x, y, angle = 0, angles = [],
spc = 360 / 5,
deg2rad = Math.PI / 180;
let clicked=0;
console.log(pos);
for(let i=0;ii = 0; i < 5; i++) { //let por var, importante!
angles.push(angle);
angle += spc;
$(`#sat${i+1}`).click(function () {
clicked=i+1;
});
}
/// space out radius
radius += (radiusSat + 10);
loop();
function loop() {
for(var i = 0; i < angles.length; i++) {
angle = angles[i];
x = cx + radius * Math.cos(angle * deg2rad);
y = cy + radius * Math.sin(angle * deg2rad);
$('#sat' + i).css({left:x - radiusSat, top:y - radiusSat});
angles[i] = angles[i] + 1;
if (angles[i] > 360) angles[i] = 0;
}
if (!clicked) {
requestAnimationFrame(loop);
} else {
requestAnimationFrame(moveToCenter);
}
}
function moveToCenter() {
let clickedDiv=$(`#sat${clicked}`);
let position=clickedDiv.position();
let centerX=position.left+25;
let centerY=position.top+25;
if (centerX > cx) {
centerX-=1;
} else if (centerX<cx) {
centerX+=1;
}
if (centerY > cy) {
centerY-=1;
} else if (centerY<cy) {
centerY+=1;
}
if (Math.abs(centerY-cy) > 1 || Math.abs(centerX-cx)>1) {
clickedDiv.css({left:centerX-25, top:centerY-25})
requestAnimationFrame(moveToCenter);
}
}
div {
border-radius:50%;
border:2px solid #000;
position:fixed;
}
#center {
width:200px;
height:200px;
left:100px;
top:100px;
}
#sat0, #sat1, #sat2, #sat3, #sat4 {
width:50px;
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="center"></div>
<div id="sat0"></div>
<div id="sat1"></div>
<div id="sat2"></div>
<div id="sat3"></div>
<div id="sat4"></div>