如何在两个Bootstrap 3选项卡之间进行幻灯片动画？

我试图找出如何在两个Bootstrap 3选项卡之间左，右，上，下滑动。
我在网上搜索过，令人惊讶的是没有找到任何东西。
我发现最接近的是Bootstrap github上的这个。 但是，它处理Bootstrap 2.0.2并且不再适用于Bootstrap 3。

有谁知道如何在两个Bootstrap 3标签之间向左，向右，向下（任何或所有）滑动？

这是我正在使用的基本Bootstrap 3选项卡设置。

 
Home
 
Profile
 
Messages
 
Settings
 
  
 
 home page content 
 
 profile page content 
 
message page content 
 
settings content
  

我通过以下几种方式之一激活我的标签。

 $('#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) 

当我进行“显示”时，我不想仅仅切换页面，而是希望在同时在新选项卡中滑动时向左或向右“滑动”旧选项卡。 即使旧标签必须首先完全滑动然后滑动新标签也是可以接受的。 但是，我更喜欢前者。

Answer 1

我在上一个项目中使用过更好的方法。 它的Animate.css

1. 很容易
2. 更多效果

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

这是一个有效的例子：

 $('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; } 

    
  
 
Tab 1
 
Tab 2
 
Tab 3
 
Tab 4
 
  
 
Tab 1
 
Tab 2
 
Tab 3
 
Tab 4
 
  

Answer 3

我不确切地知道你是否想要实现这个目标，但是如果是的话，你有我在这里和下面使用过的代码。

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