如何使用animate（）滑動（左側或右側）jQuery選項卡導航菜單？

Question

我有一個問題。我想使用animate（）函數來滑動導航菜單目前的jQuery選項卡。

我使用固定寬度樣式的標籤容器和不。的選項卡比可以容納的多 - 因此額外的選項卡溢出到下一行。

我想在標籤的兩端放兩個箭頭按鈕。因此，當用戶點擊按鈕時，導航菜單會沿相應的方向滑動。

我使用的主題是使用jQuery UI的主題滾輪功能製作的。選項卡的css使用相對定位，animate（）僅在使用絕對定位時才起作用。 jQuery的標籤的CSS是：

.ui-tabs { padding: .2em; zoom: 1; } 
    .ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .1em .1em 0; overflow: hidden;  max-height: 25px; } 
    .ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .1em -1px 0; padding: 0; } 
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .2em 0.7em; } 
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; } 
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } 
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ 
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; } 
.ui-tabs .ui-tabs-hide { display: none !important; } 

所以，任何人都可以請建議awork各地得到這個工作正常？

Answer 1

我會做的是把你的標籤放在一個容器，它有一個更大的寬度，它的容器，然後動畫該容器例如

<div id="topContainer" style="width: 800px; overflow: hidden;"> 
    <!-- calculate the width of #animateMe --> 
    <div id="animateMe" style="width: 1250px; position: absolute;"> 
     ... <!-- your tabs here --> 
    </div> 
    ... <!-- tab content here --> 
</div> 

您可能無法使用jQuery UI選項卡功能執行此操作。

編輯：在搞亂了一下之後，你應該能夠使用jQuery UI Tabs功能來處理這個問題。