title: jQuery, getting position of elements around a circle
body: <p>I'm working on getting divs to rotate around a circle. I've been working on a JSFiddle which I found a while ago that seems to be nearly what I want :</p>
  
  <p><strong><a href="http://jsfiddle.net/c7b6H/" rel="nofollow">http://jsfiddle.net/c7b6H/</a></strong></p>
  
  <p>But I just can't seem to get the desired effect that I am looking for. If you click the Go Right button you will see that the images smoothly rotate to positions to the right. Which is great, However when I click Go Left link they seem to jump to the left and start again. </p>
  
  <p>How can I get the position of the div and then make them scroll to certain positions around the circle.  For example If I clicked go right, they would do what they do now, and if I clicked it again they would  go even further right instead of starting from the beginning again. </p>
  
  <p>Here is the code:</p>
  
  <pre><code>var t, delta, finish;
  
  window.goLight = function() {
      $('.circle').removeClass('right').attr("style", "");
      t = [-Math.PI, -Math.PI, -Math.PI],
      delta = [0.07, 0.055, 0.04],
      finish = [-0.5, -1.0, -1.5];
      moveit(0);
      moveit(1);
      moveit(2);
  }
  
  window.goLeft = function() {
      $('.circle').addClass('right').attr("style", "");
      t = [0,0,0],
      delta = [-0.07, -0.055, -0.04],
      finish = [-Math.PI+0.5, -Math.PI+1.0, -Math.PI+1.5];
      moveit(0);
      moveit(1);
     moveit(2);
  }
  
  function moveit(i) {
      var r = 300; // radius
  
      var newLeft = Math.floor(r - 50 + (r * Math.cos(t[i])));
      var newTop = Math.floor(r - 50 + (r * Math.sin(t[i])));
  
      $('div.circle'+(i+1)).animate({
         top: newTop,
         left: newLeft,
      },1, function() {
         t[i] += delta[i];
         if (delta[i] &lt; 0) {
        if (t[i] &gt; finish[i]) moveit(i);
      } else {
        if (t[i] &lt; finish[i]) moveit(i);
      }
  });
  }
  </code></pre>