Анимация элементов span и 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'); 
}