javascript - jQuery animate - 除非再次触发，否则完成动画

Question

我正在使用 Phonegap 和 javascript 制作类似freaking-math 的游戏。

我需要在顶部创建类似的时间栏。我使用 jQuery animate 为栏设置动画...它只适用于第一个答案..然后第二个答案开始但不完全是在按钮被触发时..

如果没有选择答案，我怎样才能让它在按钮触发时开始并在再次触发时结束并在 3000 毫秒后结束! ？

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

我试过了:

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

但不工作:(!!

Answer 1

这是一个解决方案，假设您为每个新的数学问题重新加载页面: http://jsfiddle.net/daxro/uLd49zmp/1/

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

...这是另一个包含按钮的解决方案:http://jsfiddle.net/daxro/uLd49zmp/3/