如何在兩個Bootstrap 3選項卡之間進行幻燈片動畫？

Question

我想弄清楚如何做兩個Bootstrap 3標籤之間的向左，向右，向上，向下滑動。
我已經搜索了網頁，並且出乎意料地沒有發現任何東西。
我發現的最接近的東西是在Bootstrap github上的THIS。然而，它涉及Bootstrap 2.0.2並且不再適用於Bootstrap 3.

有人知道如何在兩個Bootstrap 3選項卡之間向左，向右，向下（任意或全部）滑動嗎？

這是我正在使用的基本Bootstrap 3選項卡設置。

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

我以這幾種方式之一激活我的選項卡。

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

我不知道你是否想要達到this，但如果是的話，你的代碼是我用的here及以下。

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

Answer 2

有我在最後一個項目使用更好的方法。它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 3

這裏有一個工作示例：

$('a[data-toggle="tab"]').on('hide.bs.tab', function (e) { 
 
\t \t var $old_tab = $($(e.target).attr("href")); 
 
\t \t var $new_tab = $($(e.relatedTarget).attr("href")); 
 

 
\t \t if($new_tab.index() < $old_tab.index()){ 
 
\t \t \t $old_tab.css('position', 'relative').css("right", "0").show(); 
 
\t \t \t $old_tab.animate({"right":"-100%"}, 300, function() { 
 
\t \t \t \t $old_tab.css("right", 0).removeAttr("style"); 
 
\t \t \t }); 
 
\t \t } 
 
\t \t else { 
 
\t \t \t $old_tab.css('position', 'relative').css("left", "0").show(); 
 
\t \t \t $old_tab.animate({"left":"-100%"}, 300, function() { 
 
\t \t \t \t $old_tab.css("left", 0).removeAttr("style"); 
 
\t \t \t }); 
 
\t \t } 
 
\t }); 
 

 
\t $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 
 
\t \t var $new_tab = $($(e.target).attr("href")); 
 
\t \t var $old_tab = $($(e.relatedTarget).attr("href")); 
 

 
\t \t if($new_tab.index() > $old_tab.index()){ 
 
\t \t \t $new_tab.css('position', 'relative').css("right", "-2500px"); 
 
\t \t \t $new_tab.animate({"right":"0"}, 500); 
 
\t \t } 
 
\t \t else { 
 
\t \t \t $new_tab.css('position', 'relative').css("left", "-2500px"); 
 
\t \t \t $new_tab.animate({"left":"0"}, 500); 
 
\t \t } 
 
\t }); 
 

 
\t $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
 
\t \t // your code on active tab shown 
 
\t });

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