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

Question

I have this code (see jsfiddle below)

<script type='text/javascript'> https://jsfiddle.net/mA8hj/ and would like to know how to edit the javascript in a way that by clicking the links in the fiddle, the text displayed fades slowly to another text when clicking another link. (Something like you'd use in CSS by adding -ms-transition: .2s;).

Thanks!

Answer 1

Try to pass "slow"/"fast"/"medium"/any delay in milliseconds as a parameter to show ,

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

DEMO

Or by using .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

Use a CSS class and CSS transitions instead, and use jQuery only to add/remove this 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/