jQuery Tabs选项卡插件带CSS3过渡动画效果

是一款带CSS3过渡动画效果的jQuery Tabs选项卡插件。它是轻量级插件，使用简单，采用响应式设计，并支持多种CSS3动画过渡效果。

使用方法
使用该Tabs选项卡插件需要在页面中引入jQuery、jQueryTab.css、animation.css和jQueryTab.js文件。
<link rel="stylesheet" href="jQueryTab.css" type="text/css" media="screen" />
<link rel="stylesheet" href="animation.css" type="text/css" media="screen" />
<script src="js/jquery.min.js"></script>
<script src="js/jQueryTab.js"></script>      


HTML结构

Tabs选项卡的基本HTML结构如下：
<div class="tabs-1">
  <ul class="tabs">
      <li><a href="#tab1">General</a></li>
      <li><a href="#tab2">Social Media</a></li>
      <li><a href="#tab-copyright">Copyright</a></li>
      <li><a href="#tab4">Contact</a></li>
  </ul>
  <section class="tab_content_wrapper">
          <article class="tab_content" id="tab1">
              <p>General calidis mundum caligine coeperunt. </p>
          </article>
          <article class="tab_content" id="tab2">
              <p>Social Media conversa egens spectent tum sed diremit haec. </p>
          </article>
          <article class="tab_content" id="tab-copyright">
              <p>Copyright eurus supplex undae fulgura congestaque locis.</p>
          </article>
          <article class="tab_content" id="tab4">
              <p>Contact erat pugnabant diffundi pondere temperiemque. </p>
          </article>
  </section>
</div>            


初始化插件

在页面DOM元素加载完毕之后，可以通过jQueryTab()方法来初始化该选项卡插件。
$('.tabs-1').jQueryTab(); 


创建Class动画类
创建Tab的进入动画过渡类：
.swingRightIn {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    opacity: 1;
    transition-delay: .3s;
}             

创建Tab的离开动画过渡类：
.swingRightOut {
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
}    

然后可以在初始化该选项卡插件时传入这些class类。
$('.tabs-1').jQueryTab({
    tabInTransition: 'swingRightIn',
    tabOutTransition: 'swingRightOut',
    cookieName: 'active-tab-1'
});