How to make a slide animation between two tabs of Bootstrap 3?

Question

I am trying to figure out how to make a slide left, right, up, down between two tabs of Bootstrap 3.
I searched the Internet and, surprisingly, did not find anything.
The closest thing I found was IT on Bootstrap github. However, it refers to Bootstrap 2.0.2 and no longer works for Bootstrap 3.

Does anyone know how to shift left, right, up, down (all or all) between two tabs of Bootstrap 3?

Here is the basic setup of the Bootstrap 3 bookmark that I am using.

<ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> <li><a href="#settings" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="home"> home page content </div> <div class="tab-pane" id="profile"> profile page content </div> <div class="tab-pane" id="messages">message page content </div> <div class="tab-pane" id="settings">settings content</div> </div> 

I will activate my tabs in one of the following ways.

 $('#myTab a[href="#profile"]').tab('show') // Select tab by name $('#myTab a:first').tab('show') // Select first tab $('#myTab a:last').tab('show') // Select last tab $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) 

Instead of just switching to pages when I do a “show,” I would like to “shift” the old tab left or right while moving to a new tab. Even if the old tab had to budge first and then move the new tab, that would be acceptable. However, I prefer the former.

Answer 1

There is a better way that I used in my last project. Its Animate.css

• Very simple
• Additional effects

Javascript

 function leftSlide(tab){ $(tab).addClass('animated slideInLeft'); } function rightSlide(tab){ $(tab).addClass('animated slideInRight'); } $('li[data-toggle="tab"]').on('shown.bs.tab', function (e) { var url = new String(e.target); var pieces = url.split('#'); var seq=$(this).children('a').attr('data-seq'); var tab=$(this).children('a').attr('href'); if (pieces[1] == "profile"){ leftSlide(tab); } }) 

Answer 2

Here is a working example:

 $('a[data-toggle="tab"]').on('hide.bs.tab', function (e) { var $old_tab = $($(e.target).attr("href")); var $new_tab = $($(e.relatedTarget).attr("href")); if($new_tab.index() < $old_tab.index()){ $old_tab.css('position', 'relative').css("right", "0").show(); $old_tab.animate({"right":"-100%"}, 300, function () { $old_tab.css("right", 0).removeAttr("style"); }); } else { $old_tab.css('position', 'relative').css("left", "0").show(); $old_tab.animate({"left":"-100%"}, 300, function () { $old_tab.css("left", 0).removeAttr("style"); }); } }); $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { var $new_tab = $($(e.target).attr("href")); var $old_tab = $($(e.relatedTarget).attr("href")); if($new_tab.index() > $old_tab.index()){ $new_tab.css('position', 'relative').css("right", "-2500px"); $new_tab.animate({"right":"0"}, 500); } else { $new_tab.css('position', 'relative').css("left", "-2500px"); $new_tab.animate({"left":"0"}, 500); } }); $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { // your code on active tab shown }); 

 .tabs-animated { overflow: hidden; } .tab-pane { height: 250px; width: 100%; } #tab1 { background: #dddddd; } #tab2 { background: #cccccc; } #tab3 { background: #bbbbbb; } #tab4 { background: #aaaaaa; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="tabs-animated"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab 1</a></li> <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab 2</a></li> <li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Tab 3</a></li> <li role="presentation"><a href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab">Tab 4</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="tab1">Tab 1</div> <div role="tabpanel" class="tab-pane fade" id="tab2">Tab 2</div> <div role="tabpanel" class="tab-pane fade" id="tab3">Tab 3</div> <div role="tabpanel" class="tab-pane fade" id="tab4">Tab 4</div> </div> </div> 

Answer 3

I don’t know exactly if there is one that you want to achieve, but if so, you have the code that I used here and below.

HTML:

 <ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> <li><a href="#settings" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane fade active in" id="home">This is the home page content </div> <div class="tab-pane fade" id="profile">This is the profile page content </div> <div class="tab-pane fade" id="messages">This is the message page content </div> <div class="tab-pane fade" id="settings">This is the settings content</div> </div> 

Javascript

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var url = new String(e.target); var pieces = url.split('#'); if (pieces[1] == 'profile'){ $('#profile').css('left','-'+$(window).width()+'px'); var left = $('#profile').offset().left; $("#profile").css({left:left}).animate({"left":"0px"}, "10"); } if (pieces[1] == 'home'){ $('#home').css('right','-'+$(window).width()+'px'); var right = $('#home').offset().right; $("#home").css({right:right}).animate({"right":"0px"}, "10"); } if (pieces[1] == 'messages'){ $('#messages').css('top','-'+$(window).height()+'px'); var top = $('#messages').offset().top; $("#messages").css({top:top}).animate({"top":"0px"}, "10"); } if (pieces[1] == 'settings'){ $('#settings').css('bottom','-'+$(window).height()+'px'); var bottom = $('#settings').offset().bottom; $("#settings").css({bottom:bottom}).animate({"bottom":"0px"}, "10"); } }) 

CSS

 #home, #profile, #messages, #settings { position: relative; } body { overflow: hidden; }