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.
Th

Answer 1

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:

    
Home
    
Profile
    
Messages
    
Settings




  
This is the home page content 
  
This is the profile page content 
  
This is the message page content 
  
This is the settings content

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