javascript - jQuery animate - finish animation unless it's fired again -

i making game freaking-math using phonegap , javascript.

i need create similar timebar @ top. use jquery animate animate bar ... works first answer .. second answer starts not when button fired ..

how can make start when button fired , end when it's fired again , end after 3000ms if no answer choosen ! ?

(function timebar() {      $('.answer').on('touchstart', function(){            $('.progress').animate({ width: '0%' }, 3000)             $('.progress').animate({ width: '100%' }, 0);         });  })();

i have tried :

(function timebar() {      $('.answer').on('touchstart', function(){            $('.progress').animate({ width: '0%' }, 3000);          });      $('.answer').on('touchend', function(){            $('.progress').animate({ width: '100%' }, 0);          });  })();

but not working :( !!

here's 1 solution, given reload page every new math-question: http://jsfiddle.net/daxro/uld49zmp/1/

$(document).ready(function() {   $("#bar").animate({     width: '0%'   }, 3000); }); 

...and here's solution includes button: http://jsfiddle.net/daxro/uld49zmp/3/