Twitter bootstrap - adding an animation / transition effect to the navigation tab

Question

I have a basic navigation bar using an example from the boot site. how can I add an animation effect (fade out and exit), so when each tab is pressed, does the new content disappear?

<!-- 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

To get to work, the "fade" class must be added to all tabs and the "in" class in the active panel. (The code below is an example from Bootstrap edited to include transitions)

Note This code is for Bootstrap 2. For v3 see 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> 

Answer 2

You just need to provide your .tab-pane fade elements as an example on the official Twitter Bootstrap page.

 <div class="tab-pane active fade in" ...> 

Remember to download bootstrap-transition.js .

Answer 3

Use history.pushState or History.js or create https://github.com/browserstate/ajaxify

This process is actually a rather complex and more complex process than it might seem.

My site at http://cameronspear.com uses a variation of this for AJAX in the content when updating the url and navigating with a nice slide effect.

The simplest alternative, you can place all the content on one page and give each section a unique identifier and a common class, and then make the links in the navigator correspond to unique identifiers and with jQuery, hide other areas of the content and show the one that was clicked.

Here is a simple example of this: http://codepen.io/CWSpear/pen/naJzl