CODEWITHSUNDEEP
jquerytwitter-bootstrapcss-animations
Alex Fox
Alex Fox

Reputation: 1225

Custom animations for Twitter Bootstraps tab function

I'm using this function for a tab/nav system:

# http://twitter.github.com/bootstrap/javascript.html#tabs

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

However, I'd like to use custom CSS animations. Is this possible? I know there's a "fade" function but I can't find much documentation on this function.

Any help, greatly appreciated!

Alex

Upvotes: 3

Views: 5512

Answers (2)

Roel
Roel

Reputation: 3096

Add "fade" to the class attribute of the div's with the class "tab-pane" And additionally "in" to the active tab.

<div class="tab-pane active fade in" id="tab1">
 ...
</div>
<div class="tab-pane fade" id="tab2">
 ...
</div>

Other animations:

$('.tabs').tabs()
    .bind('change', function (e) {
        $(this).next().hide().<<Add code to show >>
});

Upvotes: 2

rjhilgefort
rjhilgefort

Reputation: 464

Try using 'slideDown' or 'fadeIn'. Basic jquery effects should apply just as 'show' does.

http://api.jquery.com/category/effects/

Upvotes: 0

Related Questions