Home Ask Login Register

Developers Planet

Your answer is one click away!

Microsmsm February 2016

jQuery animate - finish animation unless it's fired again

I am making a game like freaking-math using Phonegap and javascript.

I need to create similar timebar at the top. I use jQuery animate to animate the bar ... it works with the first answer only well .. then the second answer it starts but not exactly when the button is fired ..

how can I make it start just when the button fired and end too when it's fired again and end also after 3000ms if no answer were 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 :( !!

Answers


daxro February 2016

Here's one solution, given that you reload the page for every new math-question: http://jsfiddle.net/daxro/uLd49zmp/1/

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

...and here's another solution which includes a button: http://jsfiddle.net/daxro/uLd49zmp/3/

Post Status

Asked in February 2016
Viewed 1,842 times
Voted 13
Answered 1 times

Search




Leave an answer


Quote of the day: live life