jquery - How to do a slide animation between two Bootstrap 3 tabs?

Question

I'm trying to figure out how to do a slide left, right, up, down between two Bootstrap 3 tabs.
I have searched the web and surprisingly have not found anything.
The closest thing I found was THIS on Bootstrap github. However, it deals with Bootstrap 2.0.2 and no longer works for Bootstrap 3.

Does anybody know how to slide left, right, up down (any or all) between two Bootstrap 3 tabs?

Here is the basic Bootstrap 3 tab setup 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 activate my tabs in one of these several 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 pages when I do a 'show' I would like to 'slide' the old tab off to the left or right while sliding in the new tab at the same time. Even if the old tab had to slide all the way off first then slide the new tab would be acceptable. However, I prefer the former.

Answer 1

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

1. Very Easy
2. More 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);        
    }
})