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.
  });
});

Answer 2

试试这个：

取代：

$('#tabContent div.content').removeClass('active');
$('#'+thref).addClass('active');

由：

$('#tabContent div.content[id!='+thref+']').fadeOut('slow', function(){
      $('#'+thref).fadeIn('slow');
});

为CSS / JS选项卡添加淡入淡出效果

2 个答案: