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

您必须使用fadeOut()的完成功能，以便仅在淡入淡出完成后替换内容。有关详细信息，请参阅jQuery doc for .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(); 
    });
}

Answer 2

我建议您将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

在执行fadeOut和fadeIn时更新内容

2 个答案: