计时器后的jQuery动画只能运行一次

Question

我正在做一个基于Web的测验，我希望每次我的计时器栏宽度设置为0时都触发leftScroll jQuery动画。但是，它只能在第一次使用。 我知道这是因为它始终以第一个.qAnswers a目标.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

试试这个简化的小提琴

问题在这里：

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