ボタンのクリックでspan要素とli要素をアニメ化する

Question

私は多肢選択式の質問をするアンケートプロジェクトに取り組んでいます。

マイページには1つの質問が含まれており、質問のラジオボタンはほとんどありません。

は、それは私が次の&前のボタンを持っているより多くの、この下の

<span id="question"/> 
<ul id="options"/> 

ようなものです。

質問とその複数のオプションのマスターリストは、JSONファイルに保存され、次の質問が正しく

function displayQuestion(questionId) { 

     $('#options').children().remove(); 
$("#question").html(questionnaire_json[0].questions[questionId].question); 

     for (j = 0; j < questionnaire_json[0].questions[questionId].answers.length; j++) { 
     $('#options:last-child').append('<li><input type="radio" name="answer1" />' + questionnaire_json[0].questions[questionId].answers[j] + '</li>'); 
     } 
    } 

が、これは正常に動作している、私が探しています何があるすべての次のスクリプトを使用してロードされます次のボタンを押して質問やオプションをアニメートする（）。私は多くの運が無ければanimateとfadeIn/fadeOutを試しました。誰かが私を案内することができます。

ありがとうございました。

Answer 1

私はこれをテストすることはできませんが、私はあなたがおそらく李ディスプレイを作る必要があると信じています。追加された後にスライドさせる行を追加します。これが同期的に実行されるかどうかはわかりません。

ul#options li.hidden { 
    display: none; 
} 

JS：

function displayQuestion(questionId) { 
    $('#options').children().remove(); 
    $("#question").html(questionnaire_json[0].questions[questionId].question); 

    for (j = 0; j < questionnaire_json[0].questions[questionId].answers.length; j++) { 
     $('#options:last-child').append(
      '<li class="hidden"><input type="radio" name="answer1" />' + 
      questionnaire_json[0].questions[questionId].answers[j] + 
      '</li>' 
     ); 
    } 
    $('#options li.hidden').slideDown().removeClass('hidden'); 
} 

あなたはマークアップを追加し、その機能が .done()

CSSになると、それらを表示するためにラインを実行する機能を追加する必要があります