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

});

來源

2017-06-21 westernit

哪裏是你的HTML/CSS？你可以嘗試添加'.answer-closed {transition：opacity 1s;不透明度：0; }'但有點不清楚你想要做什麼，沒有更多的上下文 –

我已經將它添加到我的問題，上面。 – westernit

-1

不要添加＃爲ID在VAR ID，但在你的選擇

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

做「插入符號」一樣添加它。

來源

2017-06-21 15:58:04 Kobbe

看不到任何動畫連接。 – Morpheus

-1

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

.toggleClass(className, duration)

來源

2017-06-21 16:01:55

嗨泰語，這應該是一個評論，而不是一個答案，因爲它不提供解決方案。但在這種情況下，沒有必要。 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>

來源

2017-06-22 17:46:28

動畫jQuery的切換類

回答

相關問題