如何使用JavaScript向HTML過渡添加淡入淡出效果

Question

我有此代碼（請參見下面的jsfiddle）

<script type='text/javascript'> https://jsfiddle.net/mA8hj/，並想知道如何編輯Javascript，方法是單擊小提琴中的鏈接，顯示的文本逐漸淡入另一個文本單擊另一個鏈接時。 （就像您在CSS中使用-ms-transition：.2s;一樣）。

謝謝！

Answer 1

嘗試將"slow"/"fast"/"medium"/any delay in milliseconds為"slow"/"fast"/"medium"/any delay in milliseconds作為參數show ，

$('[class^="question"]').on('click', function(e){
    e.preventDefault();
    var numb = this.className.replace('question', '');
    $('[id^="answer"]').hide();
    $('#answer' + numb).stop().show("slow");
});

演示

或使用.fadeIn()

$('[class^="question"]').on('click', function(e){
    e.preventDefault();
    var numb = this.className.replace('question', '');
    $('[id^="answer"]').hide();
    $('#answer' + numb).css("opacity",0).stop().fadeIn("slow");
});

Answer 2

請改用CSS類和CSS過渡，並僅使用jQuery添加/刪除該類.show ：

 $('[class^="question"]').on('click', function(e){ e.preventDefault(); var numb = this.className.replace('question', ''); $('[id^="answer"]').removeClass("show"); $('#answer' + numb).addClass("show"); }); 

 #answer, #answer1, #answer2, #answer3, #answer4 { position: absolute; opacity: 0; transition-duration: 0.4s; } #answer.show, #answer1.show, #answer2.show, #answer3.show, #answer4.show { position: absolute; opacity: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="new_member_box"> <a href="#" class="question1"><h4>Vision</h4></a> </div> <div class="new_member_box"> <a href="#" class="question2"><h4>Church History</h4></a> </div> <div class="new_member_box"> <a href="#" class="question3"><h4>Becoming a Member</h4></a> </div> <div class="new_member_box"> <a href="#" class="question4"><h4>Pastor-in-Training</h4></a> </div> <div class="clear" class="question"></div> <div id="answer1">1</div> <div id="answer2">2</div> <div id="answer3">3</div> <div id="answer4">4</div> <div class="new_member_box_display show" id="answer">Text will appear here when one of the tabs above is clicked</div> 

https://jsfiddle.net/mA8hj/94/