jQuery - 具有Fadein效果的滑块

Question

在此代码中

HTML

<div class="switch-content">
  <a href="#" id="content-1">link1</a>
  <a href="#" id="content-2">link2</a>
  <a href="#" id="content-3">link3</a>
</div>

<div class="show-content-1">Content 1</div>
<div class="show-content-2 hidden">Content 2</div>
<div class="show-content-3 hidden">Content 3</div> 

的jQuery

$('.switch-content a').on("click", function(e) {
  e.preventDefault();
  var $this = $(this),
      $id = $this.attr('id'),
      $class = '.' + $('.show-' + $id).attr('class').replace('hidden', '');

  $('.show-' + $id).removeClass('hidden');
  $('div[class*=show]').not($class).addClass('hidden');
});

CSS

.hidden {display: none;}  

http://codepen.io/mehmet/pen/HqlAn

我怎样才能使内容淡入，而不是仅在点击链接时显示嵌套？

Answer 1

将代码更改为此以进行淡入淡出过渡:) http://codepen.io/anon/pen/qjIxL

$('.switch-content a').on("click", function(e) {
  e.preventDefault();
  var $this = $(this),
      $id = $this.attr('id'),
      $class = '.' + $('.show-' + $id).attr('class').replace('hidden', '');


  $('div[class*=show]').not($class).fadeOut().promise().done( function(){
    $('.show-' + $id).fadeIn();
  });
});