如何使用 javascript 向 html 过渡添加淡入淡出效果

Question

我有这个代码（见下面的jsfiddle）

<script type='text/javascript'> https://jsfiddle.net/mA8hj/ 并想知道如何通过单击 fiddle 中的 link 来编辑 javascript，单击时显示的文本会慢慢淡化为另一个文本另一个 link。（类似于您通过添加 -ms-transition: .2s; 在 CSS 中使用的内容）。

谢谢！

Answer 1

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

DEMO

或使用 .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 class 和 CSS 转换，并且仅将 jQuery 用于 add/remove 这个 class .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/

如何使用 javascript 向 html 过渡添加淡入淡出效果

How to add a fade effect to html transition with javascript