Solar system in jquery

Question

I am trying to create a solar system in jQuery. I have 5 image planets that move along an ellipse path. When the planet reaches the starting point, it must begin again. I can’t do it for a while, because there are 5 planets that need to be moved, and the browser will be blocked. I have to call the function again after some time (e.g. 8 seconds to make a cicle). The planets move slowly after a while (a few minutes). Is there a better way to do this?

$(window).load(function() { solar(10, 1, "#i1", getDim($("#i1"))); solar(200, 1, "#i2", getDim($("#i2"))); solar(400, 1, "#i3", getDim($("#i3"))); solar(400, 0, "#i4", getDim($("#i4"))); solar(200, 0, "#i5", getDim($("#i5"))); }); function solar(start, dir, id, dim) { var nr = 0; var i = start; while (nr != 2) { if (dir == 1) { i += step; if (Math.abs(i - 2*aa) < step) dir = 1- dir; } else { i -= step; if (Math.abs(i) < step) dir = 1- dir; } if (Math.abs(i - start) < step) { nr++; } p = getElipsePoint(p, dim); $(id).animate( {"left": px, "top": py}, { duration:1 } ); } window.setTimeout(function() { solar(start, dir, id, dim) }, 8000); } 

Answer 1

You can determine when an animation has finished using a callback. Something like that:

 $(id).animate( {"left": px, "top": py}, { duration:1 }, function () { console.log("Begin animation again"); } );