前言
最近產(chǎn)品有個(gè)需求碉怔，要做個(gè)tab標(biāo)簽切換，這最基本的樣式當(dāng)然不在話下峰档，但作為極客的我總要與眾不同吧败匹！于是大開(kāi)腦洞，也就想出了個(gè)tab切換時(shí)候加個(gè)滑動(dòng)動(dòng)畫(huà)（表笑我讥巡，誰(shuí)讓咱沒(méi)達(dá)到UI交互設(shè)計(jì)師的高度呢）哎壳，再然后正好想起本站曾經(jīng)有個(gè)效果（傳送門），于是乎找了這個(gè)效果demo給產(chǎn)品看尚卫，產(chǎn)品欣然同意了。
詳細(xì)內(nèi)容請(qǐng)參見(jiàn)原文：http://www.gbtags.com/gb/share/5781.htm
那么尸红，問(wèn)題又來(lái)了吱涉，之前的這個(gè)效果有幾個(gè)弊端，也是我和產(chǎn)品認(rèn)為不好的：
不同tab頁(yè)的內(nèi)容高度不同外里，差距可能還比較大怎爵，不能用一個(gè)統(tǒng)一的固定高度來(lái)搞
例如從tab1跳到tab3這種跨項(xiàng)的情況，原則上是不能讓用戶在動(dòng)畫(huà)過(guò)程中看到tab2內(nèi)容的（不要問(wèn)為什么盅蝗，這就是極客精神）鳖链，如果從tab1跳到tab5，中間跨了3項(xiàng)，這體驗(yàn)總感覺(jué)略low啊
因此芙委，輪子還得造逞敷！
需求功能
不固定高度。高度不同的tab頁(yè)直接也可以自適應(yīng)切換
跨項(xiàng)無(wú)縫切換灌侣⊥凭瑁跨項(xiàng)切換時(shí)候不會(huì)看到中間項(xiàng)內(nèi)容
tab標(biāo)題也增加滑動(dòng)動(dòng)畫(huà)
思路分析
所謂不固定高度，那么只有在即將動(dòng)畫(huà)時(shí)拿到切換前和切換后兩個(gè)tab頁(yè)中較大的高度進(jìn)行設(shè)置
跨項(xiàng)不顯示中間項(xiàng)的話侧啼，那么只有“造假”了：把切換前和切換后的兩個(gè)tab頁(yè)克隆下來(lái)構(gòu)造個(gè)動(dòng)畫(huà)區(qū)牛柒，放到最前面，走個(gè)過(guò)場(chǎng)動(dòng)畫(huà)痊乾，同時(shí)隱藏掉原來(lái)真實(shí)tab頁(yè)皮壁，結(jié)束后remove掉動(dòng)畫(huà)區(qū)，同時(shí)將真實(shí)tab頁(yè)展現(xiàn)（本人覺(jué)得這是個(gè)簡(jiǎn)單的笨辦法哪审，如果大神有更合適的思路可以留言討論）
代碼賞析
以下是jquery插件的原代碼蛾魄，注釋可以說(shuō)的手把手的教學(xué)！每一步都寫(xiě)了注釋协饲，重點(diǎn)就是看“tab頁(yè)動(dòng)畫(huà)部分”的注釋
$.fn.extend({
tab: function (index) {//index:初始化后第幾個(gè)tab顯示畏腕，默認(rèn)0
詳細(xì)內(nèi)容請(qǐng)參見(jiàn)原文：http://www.gbtags.com/gb/share/5781.htm
