在按钮单击时对 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');
}