How can I access, then animate an existing leaflet map polyline using Javascript?

Can anyone suggest how I can access then animate the red polyline here using javascript:

http://gymloop.lukem.co.uk (login: User2/pass2, then select 'Challenges')

I want to animate the polyline from the first marker to the end of the red line (think Indiana jones bu开发者_Python百科t without the map moving and NOT using google maps). It needs to be dynamic as different users will have travelled different distances.

I need thew solution to work in FF, IE7+ & Chrome

I am using cloudmade's leaflet maps and am keen to avoid using google maps.

There is further information in my related question at gis.stackexchange

I've checked out your code and it seems you're using the leaflet API to draw the lines. Because of that, I've decided to write a somewhat generic function that animated those kinds of lines. (By the way, I'm confused why that API uses path tags instead of line tags, but I've rolled with it.)

Here's the code: http://jsfiddle.net/mihaibirsan/Wzvre/

I'd like to polish it a bit more, but I wanted to put a foot in the door for that bounty. :D (I'll get back to polishing and post an update in a few hours, once I've done some other work.)

I highly recommend jquery_svg plugin. I've been using it and there are plenty of features, including animation, text on path, user interaction.