jQuery animation after timer only working once

Question

I am making a web-based quiz, and I want leftScroll jQuery animation to be fired each time my timer bars width is set to 0. However it only works the first time. I get that this is because it always targets the first .qAnswers a How do I get it to fire the next each time?

Link: 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();
}

I am using this JS for firing the animation when click an "answer":

$('.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

The problem is here :

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

You can't pass along a callback function to nextQuestion. I'm guessing you want to reset the timer when the nextQuestion is shown.

If that's the case, simply put resetTimer() in the call function of the animate()

Here's the code, you'll need to adapt it.

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

You can add a counter to know which anchor to choose :

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 ++; 
}