继承Jquery的方法--tab滑动动画切换

前言

最近产品有个需求，要做个tab标签切换，这最基本的样式当然不在话下，但作为极客的我总要与众不同吧！于是大开脑洞，也就想出了个tab切换时候加个滑动动画（表笑我，谁让咱没达到UI交互设计师的高度呢），再然后正好想起本站曾经有个效果（传送门），于是乎找了这个效果demo给产品看，产品欣然同意了。

那么，问题又来了，之前的这个效果有几个弊端，也是我和产品认为不好的：

1. 不同tab页的内容高度不同，差距可能还比较大，不能用一个统一的固定高度来搞
2. 例如从tab1跳到tab3这种跨项的情况，原则上是不能让用户在动画过程中看到tab2内容的（不要问为什么，这就是极客精神），如果从tab1跳到tab5，中间跨了3项，这体验总感觉略low啊

因此，轮子还得造！

需求功能

1. 不固定高度。高度不同的tab页直接也可以自适应切换
2. 跨项无缝切换。跨项切换时候不会看到中间项内容
3. tab标题也增加滑动动画

思路分析

1. 所谓不固定高度，那么只有在即将动画时拿到切换前和切换后两个tab页中较大的高度进行设置
2. 跨项不显示中间项的话，那么只有“造假”了：把切换前和切换后的两个tab页克隆下来构造个动画区，放到最前面，走个过场动画，同时隐藏掉原来真实tab页，结束后remove掉动画区，同时将真实tab页展现（本人觉得这是个简单的笨办法，如果大神有更合适的思路可以留言讨论）

代码赏析

以下是jquery插件的原代码，注释可以说的手把手的教学！每一步都写了注释，重点就是看“tab页动画部分”的注释

文章内容请参见原文链接：http://www.gbtags.com/gb/share/5781.htm