javascript - 在执行淡出和淡入时更新内容

Question

我正在尝试更新动态测验的内容，当您回答问题时单击下一步按钮，然后该部分应该淡出，更新内容然后再次淡入新问题。

这是我用来做的代码片段

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

但是，当我单击下一步按钮进行内容更新时，该部分正在淡出...我一直在尝试执行一个函数 fadeOut() 来淡化内容，然后调用 changeQuestion 函数，但我得到了相同的结果。我会留下一些我正在尝试做的事情，希望有人能帮助我。

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

Answer 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');
    }
}

这样，通过在尝试淡出之前评估是否有选定的答案，如果没有选定的答案，您将不会得到淡出；此外，由于您在淡入淡出完成后更改了内容，因此您的效果应该看起来符合预期...

Click here for Demo