0

Web ベースのクイズを作成しており、タイマー バーの幅が 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();
                    });
4

2 に答える 2

0

この単純化されたフィドルを試してください

問題はここにあります：

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();
}
于 2013-03-05T18:21:46.297 に答える
0

カウンターを追加して、選択するアンカーを知ることができます。

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 ++; 
}
于 2013-03-05T18:25:06.313 に答える