Javascript Jquery-设置滑动效果的动画

下面是javascript函数，我试图在其中实现滑动效果

我想要的是，在点击右键（绿色按钮）时，滑动效果应该将选项卡替换为另一个选项卡，所有都是块元素

但是，效果不起作用&我确信jquery代码有问题。（左侧按钮（橙色按钮）的淡入淡出效果良好

函数activateRightTab（）
{
var eTabIndDiv=document.getElementById（“功能选项卡指示器”）。子项[0]；
var iindscont=eTabIndDiv.childNodes[1].childrength；
var direction=“right”；
如果（iActiveNo=0）
{
iActiveNo=iActiveNo+1；
如果（iActiveNo！=1 | | iActiveNo！=0）
{
$（eTabsDiv.children[iActiveNo-1]）.stop（）.animate（{“left”：“300px”}，500）；
eTabsDiv.children[iActiveNo-1].style.display=“无”；
children[iActiveNo-1].style.backgroundColor=“rgb（122121198）”；
}
**$（eTabsDiv.children[iActiveNo]）.stop（）.animate（{“left”：“300px”}，500）**
eTabsDiv.children[iActiveNo].style.display=“block”；
eTabIndDiv.children[iActiveNo].style.backgroundColor=“rgb（0100200）”；
}
激活特征容器（方向）；
返回iActiveNo；
}

下面是完整的代码（相当长），但它给出了我试图实现的效果的想法

---

我想你想要的是这样的：

为此，您首先必须给

div#features

一个

overflow:hidden

，否则，内容在向左移动/从右进入时不会隐藏

然后，您必须将新的

ul

放置在可视区域外，并使其可见，否则新内容不会从右侧进入（假设它是您想要的）。在您的情况下，您必须设置

left:292；display:block

。现在，您选择新旧

ul

，并应用

left:'-=292px'

的动画。然后隐藏旧的。应该可以这样做

var jNew = $(eTabsDiv.children[iActiveNo]);
var jOld = $(eTabsDiv.children[iActiveNo-1]);
jNew.css({
   'left': 292,
   'display': 'block'
});
jNew.add(jOld).stop(true).animate({
   'left': '-=292px'
}, function() {
   jOld.hide();
});

笔记：

• 由于

  溢出：隐藏

  ，您必须设置一个明确定义的高度。

  高度：自动

  不再有意义，因为div不再随其内容增长。理想情况下，您可以通过JS将高度调整到其子级

• 我正在使用代码中的静态值来做一个简单的解释。如果

  div#features

  曾经更改宽度，您也必须在代码中更改它。为了更好地维护，我建议您使用

  .outerWidth（）

  获得

  div#features

  的宽度，并根据该值创建动画

---

看起来您真正想要做的是在左右按钮之间创建一个div，该div内有5个水平排列的li标签，然后在用户单击左右按钮时将其像旋转木马一样左右移动

不幸的是，如果您在任何浏览器中使用DOM检查器，您将看到，按照您组合CSS的方式，5 li标记实际上在一个垂直列中运行，导致代码有点反常

我在ul id=tabs周围放了一个div，并将其设置为选项卡当前所占的宽度，overflow:hidden。然后我将ul inside设置为5个元素的宽度，并在每次单击left或right时将其left属性移动一个选项卡的宽度

您还可以查看以下信息的来源： （右上角，“来源”）

---

或者将其用于动画。

您可以使用“高度：自动”和“溢出：可见”进行渲染，获取高度，然后切换到“溢出：隐藏”并播放动画的第一帧。因为JS是同步的-在执行一块JS之前不会渲染任何内容-用户从未看到框在高度上跳跃。我猜它也是这样工作的。如何尽管如此，实际幻灯片动画的基本机制仍然有效。感谢Mike通过添加代码获得的额外长度。问题实际上是jquery的语法（我仍在努力掌握）。干杯。谢谢你帮助Chris。干杯。

var jNew = $(eTabsDiv.children[iActiveNo]);
var jOld = $(eTabsDiv.children[iActiveNo-1]);
jNew.css({
   'left': 292,
   'display': 'block'
});
jNew.add(jOld).stop(true).animate({
   'left': '-=292px'
}, function() {
   jOld.hide();
});