Twitter bootstrap - Add animation / transition effect to tabbed navigation [duplicate]

Question

i have a basic tabbed navigation using the example from the bootstrap site. how can i add an animation effect (fade in and out) so when each tab is clicked the new content is faded in?

 <!--   i have a basic tabbed navigation using the example from the bootstrap site. how can i add an animation effect (fade in and out) so when each tab is clicked the new content is faded in? -->

    <div class="tabbable">
      <ul class="nav nav-tabs nav-stacked span3">
         <li class="active">
          <a href="#myDashboardNav" data-toggle="tab">
        <i class="icon-align-justify"></i>
        My dashboard 
        <span class="badge badge-important">20%</span>
            </a>

    </li>
    <li id="myfeed">
    <a href="#myFeedNav" data-toggle="tab">
    <i class="icon-list-alt"></i>
    My feed   
    <span class="badge badge-important">6</span>
    </a>
    </li>
    <li id="notifications">
    <a href="#notificationsNav" data-toggle="tab">
    <i class="icon-time"></i>
    Notifications <span class="badge badge-important">9</span>
    </a>
    </li>
    </ul>

    <div class="tab-content span8">
    <div class="tab-pane well active" id="myDashboardNav" style="height: 330px">Content1
    </div>
    <div class="tab-pane well" id="myFeedNav" style="height: 330px">Content2

    </div>

    <div class="tab-pane well" id="notificationsNav" style="height: 330px">Content3

    </div>

    </div>

    </div>

Answer 1

For transitions to work, the class "fade" should be added on all tab-panes and class "in" on the active pane. (The code below is an example from Bootstrap, edited to include transitions)

Note: This code is for Bootstrap 2. For v3, see the docs

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active fade in" id="home">...</div>
  <div class="tab-pane fade" id="profile">...</div>
  <div class="tab-pane fade" id="messages">...</div>
  <div class="tab-pane fade" id="settings">...</div>
</div>

<script>
$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})
</script>