Jquery -为滑动效果设置动画

Question

下面是我试图带来滑动效果的javascript函数。

我想要的是，一旦点击右键(绿色按钮)，滑动效果应该用另一个选项卡替换选项卡，所有的都是块元素。

然而，效果并不起作用&我确信我在jquery代码中做错了什么。(淡入淡出效果在左侧按钮(橙色按钮)上效果良好。

    function activateRightTab()
{
    var eTabIndDiv = document.getElementById ("feature_tabs_indicators").children[0];
    var iIndsCount = eTabIndDiv.childNodes[1].children.length;
    var direction = "right";
    if (iActiveNo < iTabsCount - 1 && iActiveNo >= 0)
    {
        iActiveNo = iActiveNo + 1;
        if (iActiveNo != 1 || iActiveNo != 0)
        {
            $(eTabsDiv.children[iActiveNo - 1]).stop() .animate({"left" : "300px"}, 500);
            eTabsDiv.children[iActiveNo - 1].style.display = "none";
            eTabIndDiv.children[iActiveNo - 1].style.backgroundColor = "rgb(122,121,198)";            
        }
        **$(eTabsDiv.children[iActiveNo]).stop() .animate({"left" : "300px"}, 500);**
        eTabsDiv.children[iActiveNo].style.display = "block";
        eTabIndDiv.children[iActiveNo].style.backgroundColor = "rgb(0,100,200)";        
    }
    activateFeaturesContainer(direction);
    return iActiveNo;
}

下面是完整的代码(相当长)，但它给出了我试图实现的效果的概念。

Jsfiddle

Answer 1

我认为你想要的东西是这样的：http://www.apple.com/macbookair/

为此，您首先必须给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();
});

备注：

• 由于overflow: hidden，你必须设置一个明确定义的高度。height: auto不再有任何意义，因为div不再随其内容一起增长。理想情况下，您可以通过JS将高度调整到它的子代。
• 我正在使用代码中的静态值来做一个简单的解释。如果div#features改变了宽度，你也必须在代码中改变它。为了更好地维护，我建议您使用.outerWidth()获取div#features的宽度，并基于该值

创建动画

Answer 2

看起来你真正想要做的是创建一个位于左右按钮之间的div，里面有5个li标签，这些标签位于水平行中，然后当用户点击左右按钮时，就像旋转木马一样向左右移动它们。

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

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

你也可以看看它的源代码：http://www.baijs.nl/tinycarousel/ (右上角，“源”)，或者将它用于你的动画。