动画jQuery的切换类

问题描述：

想知道是否有人可以告诉我如何动画这个，使答案显示逐渐？我在下面添加了我的所有代码。任何帮助得到这个工作将非常感激。动画jQuery的切换类

<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;不透明度：0; }'但有点不清楚你想要做什么，没有更多的上下文 –

我已经将它添加到我的问题，上面。 – westernit

答

不要添加＃为ID在VAR ID，但在你的选择

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

做 “插入符号” 一样添加它。

看不到任何动画连接。 – Morpheus

答

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

.toggleClass(className, duration)

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

答

您可以使用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>

动画jQuery的切换类

相关推荐