title: Repeat the for loop (animation) until the selected item has the set left value
body: <p>I would like the for loop (animation) below to get repeated until the selected item's left value is equal to the <b>leftLock</b> variable. Right now, if you click on one of the navigation items, they rotate once (45°) and stop. (It's probably helpful to check the online demo to see it in action.)</p>
  
  <p><b>Online demo: <a href="http://goo.gl/8rDTr" rel="nofollow">http://goo.gl/8rDTr</a></b></p>
  
  <p>I put the <code>for</code> loop in another <code>for</code> loop and let it run 8 times but when I check the selected items left position by using <code>console.log($(this).css('left'))</code>, it always shows me the original left value - it doesn't get updated even though the item has moved to a new position.</p>
  
  <p>I appreciate all help, even if someone can tell me that the implementation of this is way more complicated than I think. :( Unfortunately I couldn't find any solution by reading many other questions posted here and searching on Google.</p>
  
  <p>It's easy to get the item's position after the animation if you slide a box from left to right since one can use jQuery's callback function but when I try to do the same on my example, I get too many values. Thanks!</p>
  
  <p><b>Edit1:</b> I put the animation loop in another loop and checking the selected items current position but its 8 x the same starting value - it doesn't change over the duration of the animation. (new lines are marked bold)</p>
  
  <p><b>Edit2:</b> I think I moved a step forward because I still get 8 x the same value but then, it shows me the new position of the selected item (also 8x) etc. Example:
  "79.1333px
  79.1333px
  79.1333px
  79.1333px
  79.1333px
  79.1333px
  79.1333px
  79.05px
  48px
  48px
  48px
  48px
  48px
  48px
  48px
  48px
  78.7167px
  79.0167px
  79.0167px
  79.0167px
  79.0167px
  79.0167px
  79.0167px
  79.05px"</p>
  
  <p>So I need to somehow filter every 8th value and check the items position by using if else condition. Does it make sense? :P</p>
  
  <p><pre><code>
  var menu_items = Array("#box_8", "#box_7", "#box_6", "#box_5", "#box_4", "#box_3", "#box_2", "#box_1");
  var menuLength = menu_items.length;
  var angleDiff  = 360 / menuLength;
  var fin = 0;
  var leftLock = "260px";</p>
  
  <p>$('a.box').click(function() {
      $(this).addClass('selected');
    <b>for (var a=0; a &lt; 8; a++) {</b>
      var startAngle = 180 + fin * angleDiff;
      var endAngle = 225 + fin * angleDiff;
      fin++;
      for (var i=0; i &lt; menu_items.length; i++) {
          startAngle += angleDiff;
          endAngle += angleDiff;
          $(menu_items[i]).animate({
              path: new $.path.arc({
              center: [154, 154],
              radius: 106,
              start: startAngle,
              end: endAngle,
              dir: 1
          }),
          opacity: '1'
          },400, animFinished);
      };
      };
  function animFinished() {
      console.log($('.selected').css('left'));
  }
  });
  </pre></code></p>