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

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

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 回答