动画 jquery 切换类答案

【问题标题】：animate jquery toggle class动画 jquery 切换类
【发布时间】：2017-06-21 15:51:43
【问题描述】：

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

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

});

【问题讨论】：

你的html/css在哪里？您可以尝试添加 .answer-closed { transition: opacity 1s; opacity: 0; }，但如果没有更多上下文，您会不清楚您要做什么
我已将其添加到我的问题中，上面。

标签： javascript jquery css jquery-animate

【解决方案1】：

您可以将 css transition 与 opacity 一起使用。我在您的 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>

【讨论】：

【解决方案2】：

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

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

对“插入符号”执行相同操作。

【讨论】：

看不到与动画的任何联系。

【解决方案3】：

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

.toggleClass(className, duration)

【讨论】：

嗨泰语，这应该是评论，而不是答案，因为它不提供解决方案。但在这种情况下，没有必要。 OP 正在使用$.toggleClass()，问题是关于如何为$.toggleClass() 制作动画