JQuery - слайдер с FadeIn Effect

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