javascript - 向 CSS/JS 选项卡添加淡入淡出效果

Question

大家好，我得到了这个JS代码，想在切换标签时添加一个淡入淡出的效果，这样看起来更流畅一些。

<script type="text/javascript">
$(document).ready(function(){
  initTabs();
});

function initTabs() {
  $('#tabMenu a').bind('click',function(e) {
  e.preventDefault();
  var thref = $(this).attr("href").replace(/#/, '');
  $('#tabMenu a').removeClass('active');
  $(this).addClass('active');
  $('#tabContent div.content').removeClass('active');
  $('#'+thref).addClass('active');
  });
}

这是相应的 HTML:

<ul id="tabMenu">
    <li><a id="tab_1" class="active" href="#1">Tab 1</a></li>
    <li><a id="tab_2" class="" href="#2">Tab 2</a></li>
</ul>
<div id="tabContent">
    <div id="1" class="content active"></div>
    <div id="2" class="content"></div>
</div>

Answer 1

查看FadeIn和 FadeOut方法。

使用它们非常简单:

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});