jquery - jQuery を使用して、$.when().then() を使用してコンテンツ div を同じ領域に出し入れします。

Question

このstackoverflowスレッドのコードを使用して、このWebテンプレートに似たコンテンツスライダーを開発しようとしています

これが私の仕事の jsfiddleです。

リンクをクリックしてコンテンツを表示します。以前に表示されたコンテンツは、それを行う前に非表示になります。一部のコンテンツが表示されている場合は、クリックして手動で非表示にすることができます。

リンクの ID (A、B など) を使用して、表示するコンテンツ ( <div>) の ID を取得します。要素が表示されると、後で識別するために「elementEnabled」というクラスが与えられます。

新しいコンテンツをスライドインする前に、非表示になっているコンテンツを邪魔にならないようにしたい。どうすればそれを秩序ある方法で行うことができますか？私.delay()が持っているもの.show()はそれを行うのに良い方法ですか?

表示されているコンテンツを体系的に非表示にしてから、適切なコンテンツを表示するためのよりエレガントな方法 (jQuery で) はありますか? $.when().then(function(){})???を使用するよりも良い方法はあります か? それだけ多くのコードをコールバック関数 (以下のように) に入れるのは良い習慣ですか、それともコードの「表示」部分を別の関数に分割する必要がありますか?

提案をありがとう。

HTML:

<div id="links">
<a href="#" id="a-link">A</a>
<a href="#" id="b-link">B</a>
</div>
<div id="wrap">
<div class="start-content" id="a">
content here
</div>    
<div class="content" id="b">
content here
</div>
</div>

これがJavaScriptです：

$("#links a").click(function() {

//  having to do this for the callback function below
var park_this = $(this);

//  which ID is currently shown?
id_enabled = $('.enabledElement').attr("id").replace('-link', '');           

//hide previously displayed content
$.when($('#' + id_enabled).stop().hide("slide", 
    { direction: "left" }, 400)).then( function(){ // callback 

// remove any instances of special class
$('.enabledElement').removeClass('enabledElement');

// add special class to clicked element 
park_this.addClass('enabledElement');

// using the link ID, get the ID of the content to show
var id = park_this.attr("id").replace('-link', ''); //matching id

//show what's clicked on
$('#' + id).stop().delay(initial_pause).show("slide", 
    { direction: "left" }, 1000 );    

});  // close when/then callback function

} // close "click" function