Question

I am making a futsal (indoor soccer) coaching application which allows a coach to add players on the screen, set their movement direction (by drawing arrows using HTML5 canvas), and then press ‘play’ to move all players on the screen. A player is made up of a div with a background image of a player.

Animation is being done by using jquery .animate() function.

All I do is change the player div's left and top css position attributes.

I would like to do two things and unsure on how that can be done:

1. I want to create a jQuery slider and move it incremently as the animation takes place. I am guessing I would do this by calculating the total length of an animation before starting it?

2. I would like to move the jQuery slider above backwards and forth – to reverse the animataion and pause it when required. is that possible at all given that we are moving divs for animation, and not doing a frame-by-frame sequence animation.

Answer 1

Before the animation starts, how about saving the starting position?

startpostion = $(playerdiv).position(); //Or offset, I keep forgetting which $(playerdiv).data('startTop',startposition.top); $(playerdiv).data('startLeft',startposition.left); 

Later you can retrieve it using

left = $(playerdiv).data('startTop') 

etc.

You can allways provide a callback to animations using the step option, this way you can update your slider accordingly.

$(playerdiv).animate({      top : targetTop,     left : targetLeft,      step, function(){ magic happens here })