jQuery анимация после таймера только работает один раз

Question

Я делаю веб-викторину, и я хочу, чтобы анимация jQuery leftScroll запускалась каждый раз, когда моя ширина бара таймера установлена ​​на 0. Однако она работает только в первый раз. Я понимаю, что это происходит потому, что он всегда нацелен на первый .qAnswers a Как я могу запустить его каждый раз?

Ссылка: http://www.carlpapworth.com/friday-quiz/#

JS:

timesUp(); 

function timesUp(){ 
      $('#timerBar').animate({'width':'0px'}, 1500, function(){ 
       nextQuestion(function(){ 
        resetTimer(); 
       }); 
      });     
} 

function nextQuestion(event){ 
    var $anchor = $('.qAnswers a'); 
    $('#qWrap').stop(true, true).animate({ 
     scrollLeft: $($anchor.attr('href')).position().left 
     }, 2000, function(){ 
      nextCount(); 
      $anchor = $anchor.next('.qContainer a'); 
     }); 

} 

function resetTimer(){ 
    $('#timerBar').css('width', '99%'); 
    timesUp(); 
} 

Я использую этот JS для стрельбы анимации, когда щелкнуть "ответ":

$('.qAnswers li a').bind('click',function(event){ 
        $(this).parent().addClass('selected'); 
         var $anchor = $(this); 
         $('#qWrap').stop(true, true).delay(800).animate({ 
          scrollLeft: $($anchor.attr('href')).position().left 
         }, 2000, function(){ 
       nextCount(); 
         }); 
         stopTimer(); 
         event.preventDefault(); 
        }); 

Answer 1

Try this simplified fiddle

Проблема находится здесь:

nextQuestion(function(){ 
    resetTimer(); 
}); 

Вы не можете передать функцию обратного вызова в nextQuestion. Я предполагаю, что вы хотите сбросить таймер при показе nextQuestion.

Если это так, просто положить resetTimer() в функции вызова из animate()

Вот код, вам нужно адаптировать его.

timesUp(); 

function timesUp() { 
    $('#timerBar').animate({ 
     'width': '0px' 
    }, 5000, function() { 
     nextQuestion(); 

    }); 
} 

function nextQuestion(event) { 
    resetTimer(); 
    /* 
    var $anchor = $('.qAnswers a'); 
    $('#qWrap').stop(true, true).animate({ 
     scrollLeft: $($anchor.attr('href')).position().left 
    }, 2000, function() { 
     nextCount(); 
     resetTimer(); 
     $anchor = $anchor.next('.qContainer a'); 
    }); 
    */ 

} 

function resetTimer() { 
    $('#timerBar').css('width', '100%'); 
    timesUp(); 
} 

Answer 2

Вы можете добавить счетчик знать, какой якорь на выбор:

var counter = 0; 
function nextQuestion(event){ 
    var $anchor = $('.qAnswers a'); 

    // try to see the good anchor 
    console.log($anchor[counter]); 

    $('#qWrap').stop(true, true).animate({ 
     scrollLeft: $($anchor.attr('href')).position().left 
     }, 2000, function(){ 
      nextCount(); 
      $anchor = $anchor.next('.qContainer a'); 
     }); 
    counter ++; 
}