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.

Solution 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);        
    }
})

Solution 2

Here's 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>

Solution 3

I don't know exactly if is this you want to achieve, but if yes, you have the code 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;
}