jquery - ブートストラップ ajax タブに jquery アニメーションを追加する方法

Question

動作する jQuery ajax タブのセットがあります。そして、ディスプレイに少しアニメーションが必要です。アニメーションを追加しようと何度も試みました。動作しているように見えますが、問題が発生しました - タブが一意ではありません。2 番目のタブをクリックすると、コンテンツが新しいタブに読み込まれません。ただし、代わりに現在のコンテンツの下に引き続き表示されます。これが私のコードです：

HTML

<ul id="MainTabs" class="nav nav-tabs">
  <li><a data-target="#tab1" data-toggle="tab" href="inc/timetable_content_detail.php?id=1">Tab 1</a></li>
  <li><a data-target="#tab2" data-toggle="tab" href="inc/timetable_content_detail.php?id=2">Tab 2</a></li>
  <li><a data-target="#tab3" data-toggle="tab" href="inc/timetable_content_detail.php?id=3">Tab 3</a></li>
  <li><a data-target="#tab4" data-toggle="tab" href="inc/timetable_content_detail.php?id=4">Tab 4</a></li>
  <li><a data-target="#tab5" data-toggle="tab" href="inc/timetable_content_detail.php?id=5">Tab 5</a></li>
</ul>

<div class="tab-content" style="background:#ffffff">
  <div class="tab-pane" id="tab1"><?include "inc/timetable_content_detail.php";?></div>
  <div class="tab-pane" id="tab2"><img src="images/loading.gif" />Loading...</div>
  <div class="tab-pane" id="tab3"><img src="images/loading.gif" />Loading...</div>
  <div class="tab-pane" id="tab4"><img src="images/loading.gif" />Loading...</div>
  <div class="tab-pane" id="tab5"><img src="images/loading.gif" />Loading...</div>
</div>

Javascript

$(function() {
  $("#MainTabs").tab();
  $("#MainTabs").bind("show", function(e) {    
    var contentID  = $(e.target).attr("data-target");
    var contentURL = $(e.target).attr("href");
    $(contentID).load(contentURL, function(){
      $("#MainTabs").tab().slideDown("slow");
    });
  });
  $('#MainTabs a:first').tab("show");
});

tab() の後に slideDown("slow") を追加しようとしましたが、そうではないようです。私のコードを見て提案してください。

よろしく、