jquery - 我如何使用 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; }

那么，任何人都可以提出解决方法以使其正常工作吗？

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 选项卡功能进行此操作。