jQuery Transit animation not executing within for loop properly.
===

I am using [jQuery Transit][1] to animate a changing <div> element. 

I am animating multiple boxes using a for loop. 

The javaScript:
    <script>
    window.onload = function(){
      $('div.test').mouseover(function(){
        for (var i = 0; i < 2; i++){
          console.log(i+' Starting Loop');
          
          //Rotate box animation
          $('div.test' && '.'+i).transition({
            perspective: '100px',
            rotateY: '-180deg',
            x: '-90px'
          }, 'slow',function(){
            //On completion code.
            $('div.test' && '.'+i).append(' With Changed Text');
            console.log(i + 'Text has been changed');
            
            //Rotate back
            $('div.test' && '.'+i).transition({
              perspective: '100px',
              rotateY: '0deg',
              x: '0px'
            }, 'slow');
          });
          console.log(i + 'finished the loop');
          alert(i + ' finished loop');
        }
      });
    }
    </script>

And the HTML:

    <body>
    <div class='test 0'>
      Box1
    </div>
    <div class='test 1'>
      Box2
    </div>
    </body>

It is supposed to work by making the box move, make the appropriate changes, and then move back to its original position. 

However, instead of waiting for the first animation to finish before moving on to the next iteration of the for loop, it seems to be waiting until the for loop is finished before it executes the $.transition() functions. 

So when the $.transition() functions are called, i = 2. Therefore the $.append() function is appending to an element with the class '.2', which does not exist. 

Is there any way to make sure the animations execute within the loop properly?

*NOTE* This is a simplified version of my real code. I would normally be appending different values for each box. I am also iterating through a list which could possibly be longer than 2. 

  [1]: http://ricostacruz.com/jquery.transit/