javascript - 动画 jquery 切换类

Question

想知道是否有人可以告诉我如何制作动画以便逐渐显示答案？我在下面添加了我的所有代码。非常感谢任何有助于使这项工作正常进行的帮助。

<div class="q-a-set">
<div class="licensing-question" id="q_1">
<i class="fa fa-caret-square-o-down" aria-label="Answer"></i> <span>Do I need to pay?</span>
</div>
<div class="licensing-answer-closed" id="a1"><span class="licensing-answer">Yes</span></div>
</div>

.licensing-question{
        font-size: 2.2em;
        font-weight: 700;
        font-family: 'Source Sans Pro', sans-serif;
        color: #a8a8a8;
        cursor: pointer;
        line-height: 1.2em;
        margin: 0;
        padding: 0;
        display: inline;

    }
    .licensing-answer-closed{
        height: 0;
        visibility: hidden;
    }
    .licensing-answer{
        color: #222222;
        font-size: 1.8em;

    }

var showAnswerBtn = $(".licensing-question");
var caret = showAnswerBtn.find('.fa');


showAnswerBtn.click(function () {
    //alert(caret);
    event.preventDefault();
    var target = this.id.split('_');
    var id = "a" + target[1];

    $("#" + id).toggleClass('licensing-answer-closed');
    $(caret).toggleClass('fa-caret-square-o-up');

});

Answer 1

您可以使用带有 opacity 的 css transition。我向您的 HTML 添加了一个类，因此我可以使用类选择器来建立 transition。

var showAnswerBtn = $(".licensing-question");
var caret = showAnswerBtn.find(".fa");

showAnswerBtn.click(function() {
  //alert(caret);
  event.preventDefault();
  var target = this.id.split("_");
  var id = "a" + target[1];

  $("#" + id).toggleClass("licensing-answer-closed");
  $(caret).toggleClass("fa-caret-square-o-up");
});

.licensing-question {
  font-size: 2.2em;
  font-weight: 700;
  font-family: 'Source Sans Pro', sans-serif;
  color: #a8a8a8;
  cursor: pointer;
  line-height: 1.2em;
  margin: 0;
  padding: 0;
  display: inline;
}
.licensing-answer-closed {
  height: 0;
  opacity: 0;
}
.licensing-answer {
  color: #222222;
  font-size: 1.8em;
}
.licensing-answer-parent {
  transition: opacity 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="q-a-set">
  <div class="licensing-question" id="q_1">
    <i class="fa fa-caret-square-o-down" aria-label="Answer"></i> <span>Do I need to pay?</span>
  </div>
  <div class="licensing-answer-closed licensing-answer-parent" id="a1"><span class="licensing-answer">Yes</span></div>
</div>