按鈕單擊動畫跨度和li元素

Question

我正在研究一個有多個選擇題的問卷項目。

我的頁面包含單個問題和幾個選項，其中包含問題的單選按鈕。

它更像

<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

我無法測試這個，但我相信你可能需要讓li顯示：none;默認情況下，然後添加一行以將其向下滑動後添加。我不確定這是否會同步運行。您可能需要添加一個函數來添加標記，然後運行線，以顯示他們一旦功能.done()

CSS：

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