Inserting animate() and show() into a queue in a for cycle

Inserting animate() and show() into a queue in a for cycle

I'm having a very specific problem, I don't even know what to look for in Google... I'm trying to create an animated letter. There's a pen and 5 lines which are in a separate tag, all within one container element, positioned relatively, having their own ID, and the lines are hidden (all on their place, where they should appear). The animation is like this: the pen moves diagonally, a line appears, the pen moves to the beginning of the new line, repeat 5 times, pen goes back to default position, lines disappear. I didn't want to write the animation code for all 5 cycles separately, so I inserted the animations into a queue using a for cycle. Everything is working fine, except the silliest thing - I can't get the current line number to show. Here's the code:

  

  1. for (var i=1; i<=5; i++) {
  2.       pen.queue('penAnimation', function(next) {          
  3.     //var line = $('#form_header_decor :nth-child(' + i.toString() + ')')
  4.     var line = $('#line_' + i.toString())
  5.     line.show();
  6.     //alert(line.id);
  7.     next();
  8.       })
  9. }
 The problem is, i always outputs 5 - the number at which the cycle ends. I wanted to post the whole function, but it's too long for this post, 
so you can check it out here: http://stackoverflow.com/questions/12162673/jquery-animate-show-in-a-queue-in-for-cycle