How can I fade tabs in & out with the Twitter Bootstrap framework?

Question

jQuery UI has the option to initialize tabs with the tabs set to fade in/out, like so:

$(".selector").tabs({ fx: { opacity: 'toggle' } });

Is something similar possible with the Twitter Bootstrap framework tabs?

Answer 1

Both for Bootstrap 2 and 3, you can simply give your .tab-pane elements a fade class with bootstrap-transition.js loaded. No need to write a single line of your own JavaScript code at all.

<div class="tab-content">
  <div class="tab-pane fade in active" 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>

Code sample from the official Twitter Bootstrap documentation.

Answer 2

No, but you could add your own, jsFiddle

$('.tabs').tabs()
    .bind('change', function (e) {
        $(this).next().hide().fadeIn();
    });