jQuery 如何在两个 Bootstrap 3 选项卡之间制作幻灯片动画？

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

提问by fat fantasma

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 THISon Bootstrap github. However, it deals with Bootstrap 2.0.2 and no longer works for Bootstrap 3.

我想弄清楚如何在两个 Bootstrap 3 选项卡之间向左、向右、向上、向下滑动。
我在网上搜索过，令人惊讶的是没有找到任何东西。
我在 Bootstrap github 上找到的最接近的东西是THIS。但是，它处理 Bootstrap 2.0.2，不再适用于 Bootstrap 3。

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

有人知道如何在两个 Bootstrap 3 选项卡之间向左、向右、向上滑动（任意或全部）吗？

Here is the basic Bootstrap 3 tab setup that I am using.

这是我正在使用的基本 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>

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.

我不只是在“显示”时切换页面，我想在滑动新标签的同时向左或向右“滑动”旧标签。即使旧标签必须先滑出然后滑动新标签也是可以接受的。不过，我更喜欢前者。

回答by Hardik Gajjar

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

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

1. Very Easy
2. More Effects

1. 好简单
2. 更多效果

JavaScript

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

回答by Arthur Shlain

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>

回答by paulalexandru

I don't know exactly if is thisyou want to achieve, but if yes, you have the code i used hereand below.

我不知道这是否是你想要实现的，但如果是，你有我在这里和下面使用的代码。

HTML:

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

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

CSS

#home, #profile, #messages, #settings {    
    position: relative;
}

body {
    overflow: hidden;
}