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

您可以将transition与opacity一起使用。我在HTML中添加了一个类，因此我可以使用类选择器来建立transition。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

不要在var id中添加#id，而是将其添加到选择器

中

var id = "a" + target[1]; // take out -> "#"
$("#" + id).toggleClass('answer-closed');

为＆＃34;插入＆＃34;。

做同样的事情

Answer 3

如果您使用jQuery UI： https://api.jqueryui.com/toggleClass/

.toggleClass(className, duration)

动画jquery切换类

3 个答案: