javascript - 计时器后的jQuery动画只工作一次

Question

我正在做一个基于网络的测验，我希望每次我的计时器栏宽度设置为 0 时触发 leftScroll jQuery 动画。但是它只在第一次工作。我知道这是因为它总是针对第一个.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。我猜你想在显示下一个问题时重置计时器。

如果是这种情况，只需将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 ++; 
}