jQuery .fadeOut / fadeIn问题

Question

我有一个简单的脚本来滚动一系列问题。我想要的jQuery动画效果 - 一世。按钮点击淡入淡出问题 II。操纵DOM III。淡出新问题 正如你在这里看到的那样

 // Function to fade out and erase question
   function eraseQuestion() {
      $( "#question, #test1" ).fadeOut( "slow" );
      check_answer();
      $("input").remove();
      $("span").remove();
      $("br").remove();

在这个jsfiddle中发生的事情是： 我出现了新的问题 II。 DOM的fadeOut III。 fadeIn的新DOM 我尝试了几个方面，包括使用完整选项调用eraseQuestion但没有任何作用。有什么建议吗？

Answer 1

根据OP问题更新了代码：

$(document).ready(function() {
//Array of array to hold Test Questions and answers
var allQuestions = [{
  question: ["Who is Prime Minister of the United Kingdom?", "Who is the Vice-President of the United States?", "Who is Chancellor of Germany?", "Who is the Prime Minister of Canada?"],
  choices: [
    ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
    ["Barack Obama", "Bernie Sanders", "Nancy Pelosi", "Joe Biden"],
    ["Franz Ritz", "Angela Merkel", "Jan Schroeder", "John Stevens", "Karl Marx"],
    ["Wayne Gretsky", "Pierre Trudeau", "Mike Myers", "Justin Trudeau", "Justin Bieber"]
  ],
  correctAnswer: [0, 3, 1, 3]
}];

////Initialize Variables
var questionCounter = 0;
var answerTally = 0;
var score = 0;
var submitAnswerClick = false;
var i = questionCounter;

//Check for correct answer and keep tally of total correct answers function.
function check_answer() {
 for (var k = 0; k < allQuestions[0].choices[i].length; k++) {
  //Check if radio button is marked and answer is correct
  if ((document.getElementById(k).checked == true) && (document.getElementById(k).value == allQuestions[0].correctAnswer[questionCounter])) {
    //If so, add to tally and increment counters
    answerTally = answerTally + 1;
    questionCounter = questionCounter + 1;
    i = questionCounter;
    return answerTally;
  } else if (document.getElementById(k).checked == true) {
    questionCounter = questionCounter + 1;
    i = questionCounter;
    return answerTally;
  } else {
    //we didnt check a radio button
    if (k + 1 == allQuestions[0].choices[i].length) {
      alert("Alert. No Box Checked.");
    }
   }
  }
}
//End check_Answer function

$("#btn1").click(function() {

//Check submitAnswerClick,if set we have clicked past the initial introduction and need to call check_answer function and erase this question 
if (submitAnswerClick) {
  check_answer(); 
}
//Print Out Question and choices
var question = '';
var form = '';
if (questionCounter <= allQuestions[0].question.length - 1) {
  question = allQuestions[0].question[i];
  //Print Out Choices
  for (var j = 0; j < allQuestions[0].choices[i].length; j++) {
    form +="<input class=answers type='radio' name='choice' id=" + j + " value=" + j + ">" + "<span>" + allQuestions[0].choices[i][j] + "</span><br/>";
  }
  $( "#container" ).fadeOut( "slow",function(){
    $("#question").html(question);
    $("form").html(form); 
    $( "#container" ).fadeIn( "slow" );
  } );


  } else {
  //Let's wrap this up and tidy up loose ends
  $("#question").replaceWith("<h3><p>Test Over. Thanks for Participating. <br/>You're score was " + answerTally / allQuestions[0].question.length * 100 + " % </p></h3>");
  $("form").html('');
  $("#btn1").remove();
  }


// End of Print Out Question & selections

//Set so we know initial click has taken place and change the button textNode
submitAnswerClick = true;
$("button").html("<p><em>Next Question</em></p>");

});

});

工作小提琴（更新）：https://jsfiddle.net/robertrozas/geoevhke/7/