如何使用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功能来处理这个问题。