1

動的クイズのコンテンツを更新しようとしています。質問に答えると、次のボタンをクリックしてから、セクションがフェードアウトし、コンテンツを更新してから、新しい質問で再びフェードインします。

これは私がそれを行うために使用しているコードです

function changeQuestion(){
    questions.fadeOut();
    // first, check answer
    if($("#myForm input[type='radio']:checked").length ==1){
        //add the answer to the answers array
        answers[number] = $("#myForm input[type='radio']:checked").val(); 
        // increment the number
        number++;

        // then, move to next question OR show results
        if (number < allQuestions.length) {
            $('#back').show();
            addQuestionAndAnswers();

        }else {
            displayResult();
        }
    }else{
        alert('please select an answer before proceed');
    }
    questions.fadeIn(); 
}

しかし、セクションがフェードアウトしているときに次のボタンをクリックしてコンテンツを更新すると...コンテンツをフェードアウトしてからchangeQuestion関数を呼び出す関数fadeOut（）を実行しようとしましたが、同じ結果が得られました。私がやろうとしていることのフィドルを残しておきます。誰かが私を助けてくれることを願っています。

http://jsfiddle.net/xtatanx/Wn8Qg/16/

4

2 に答える 2

1

fadeOut()フェードが終了した後にのみコンテンツを置き換えるように、完了機能を使用する必要があります。詳細については、jQuery のドキュメントを.fadeOut()参照してください。

このようなもの：

function changeQuestion(){
    questions.fadeOut(function() {
        // first, check answer
    if($("#myForm input[type='radio']:checked").length ==1){
            //add the answer to the answers array
            answers[number] = $("#myForm input[type='radio']:checked").val(); 
            // increment the number
            number++;

            // then, move to next question OR show results
            if (number < allQuestions.length) {
                $('#back').show();
                addQuestionAndAnswers();

            }else {
                displayResult();
            }
        }else{
            alert('please select an answer before proceed');
        }
        questions.fadeIn(); 
    });
}
于 2013-04-01T22:49:25.223 に答える
1

changeQuestion()関数を次のように変更することをお勧めします。

function changeQuestion() {
    if ($("#myForm input[type='radio']:checked").length == 1) {
        questions.fadeOut(400, function () {
            // first, check answer

            //add the answer to the answers array
            answers[number] = $("#myForm input[type='radio']:checked").val();
            // increment the number
            number++;

            // then, move to next question OR show results
            if (number < allQuestions.length) {
                $('#back').show();
                addQuestionAndAnswers();

            } else {
                displayResult();
            }
            questions.fadeIn();
        });
    } else {
        alert('please select an answer before proceed');
    }
}

そうすれば、フェードを試みる前に選択された回答があるかどうかを評価することで、選択された回答がない場合はフェードしません。また、フェードが完了した後にコンテンツを変更しているため、効果は意図したとおりに見えるはずです...

デモはこちら

于 2013-04-01T22:53:07.653 に答える