jQuery Forum

Hi all, I have been working on a circle menu where the selected/clicked item has to move to a set location. Link to a live demo: Link to example

I got stuck because I cannot really check the selected item's new position (after it starts to move along the circle) because I get the following by using console.log($(this).css('left')): 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

I would appreciate it if I could get help on how to detect if the selected item is at "var leftLock = "260px" " and stop the animation to call another function. As a jQuery beginner, I dont know if that what I'm trying to do is too complicated? Thanks!

Here is the code:

1. 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";
   
   $('a.box').click(function() {
      
       $(this).addClass('selected');
      
       for (var a=0; a < 8; a++) {
           var startAngle = 180 + fin * angleDiff;
           var endAngle = 225 + fin * angleDiff;
           fin++;
          
           for (var i=0; i < 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, 'linear');
           };
       };
   });